Set initial focus and focus trap for add/edit form

mitwelten · Aug 25, 2023 · a91eedb · a91eedb
1 parent b65812b
commit a91eedb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -55,6 +55,7 @@ import { EnvFormComponent } from './components/env-form/env-form.component';
 import { EnvFilterComponent } from './components/env-filter/env-filter.component';
 
 import '@angular/common/locales/global/de';
+import { A11yModule } from '@angular/cdk/a11y';
 
 function initializeKeycloak(keycloak: KeycloakService) {
   return () =>
@@ -112,6 +113,7 @@ export class CustomMaterialFormsMatcher implements ErrorStateMatcher {
     ReactiveFormsModule,
     BrowserAnimationsModule,
     LayoutModule,
+    A11yModule,
     MatToolbarModule,
     MatButtonModule,
     MatSidenavModule,

diff --git a/src/app/components/deployment-form/deployment-form.component.html b/src/app/components/deployment-form/deployment-form.component.html
@@ -3,7 +3,7 @@ <h2 class="icon-header">
   <span>{{ title }}</span>
 </h2>
 
-<form [formGroup]="deploymentForm" (ngSubmit)="submit()">
+<form [formGroup]="deploymentForm" (ngSubmit)="submit()" cdkTrapFocus cdkTrapFocusAutoCapture>
 
   <mat-form-field class="full-width-field" appearance="outline">
     <mat-label>Node</mat-label>
@@ -28,7 +28,7 @@ <h2 class="icon-header">
     </mat-date-range-input>
     <mat-hint>DD.MM.YYYY – DD.MM.YYYY (leave a date empty for unbounded range)</mat-hint>
     <mat-error *ngIf="deploymentForm.errors !== null">errors</mat-error>
-    <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
+    <mat-datepicker-toggle cdkFocusInitial matSuffix [for]="rangePicker"></mat-datepicker-toggle>
     <mat-date-range-picker #rangePicker>
       <mat-date-range-picker-actions>
         <button mat-button matDateRangePickerCancel>Cancel</button>

diff --git a/src/app/components/node-form/node-form.component.html b/src/app/components/node-form/node-form.component.html
@@ -3,13 +3,13 @@ <h2 class="icon-header">
   <span>{{ title }}</span>
 </h2>
 
-<form [formGroup]="nodeForm" (ngSubmit)="submit()">
+<form [formGroup]="nodeForm" (ngSubmit)="submit()" cdkTrapFocus cdkTrapFocusAutoCapture>
 
   <mat-form-field class="full-width-field" appearance="outline">
     <mat-label>Name (a.k.a. Node Label / ID)</mat-label>
     <input matInput type="text" placeholder="2323-4242" formControlName="node_label" id="name">
     <mat-error *ngIf="nodeForm.controls.node_label.invalid">{{ getErrorMessage() }}</mat-error>
-    <button matSuffix mat-icon-button color="accent" type="button" (click)="generateLabel()" matTooltip="Generate a Node Label">
+    <button #generate cdkFocusInitial matSuffix mat-icon-button color="accent" type="button" (click)="generateLabel()" matTooltip="Generate a Node Label">
       <mat-icon class="material-symbols-outlined">magic_button</mat-icon>
     </button>
   </mat-form-field>

diff --git a/src/app/components/node-form/node-form.component.ts b/src/app/components/node-form/node-form.component.ts
@@ -7,6 +7,8 @@ import { ActivatedRoute, ActivationEnd, Params, Router } from '@angular/router';
 import { catchError, debounceTime, Observable, of, startWith, Subscription, switchMap } from 'rxjs';
 import { DataService, NodeValidator } from 'src/app/shared';
 import { DeleteConfirmDialogComponent } from '../delete-confirm-dialog/delete-confirm-dialog.component';
+import { MatIconButton } from '@angular/material/button';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'app-node-form',
@@ -49,6 +51,8 @@ export class NodeFormComponent implements OnInit, OnDestroy {
   powerOptions: Observable<string[]>;
 
   @ViewChild('deleteError') deleteErrorDialog: TemplateRef<any>;
+  @ViewChild(CdkTrapFocus, { static: true }) focusTrap: CdkTrapFocus;
+  @ViewChild('generate', { static: true, read: MatIconButton }) buttonGenerate: MatIconButton;
 
   snackBarConfig: MatSnackBarConfig = {
     duration: 3000,
@@ -117,6 +121,9 @@ export class NodeFormComponent implements OnInit, OnDestroy {
       startWith(''), debounceTime(250),
       switchMap(v => this.dataService.getNodePowerOptions(v))
     );
+
+    // in addition to cdkFocusInitial, this will show the label
+    this.buttonGenerate.focus('keyboard');
   }
 
   ngOnDestroy(): void {
@@ -133,6 +140,7 @@ export class NodeFormComponent implements OnInit, OnDestroy {
       this.dataService.getNodeById(id).subscribe(node => {
         if (node !== null) {
           this.mode = 'edit';
+          this.focusTrap.focusTrap.focusFirstTabbableElement();
           this.title = `Edit Node ${node.node_label} (${node.node_id})`
           this.nodeForm.patchValue(node);
         }