Merge pull request #2699 from Azure/mhdahman/a11y-keyboard

mhdahman · web-flow · commit d1abd517e886 · 2023-04-06T16:12:50.000-04:00
Keyboard accessibility bugs (463, 853, 593)
diff --git a/src/@batch-flask/ui/form/complex-form/complex-form.component.ts b/src/@batch-flask/ui/form/complex-form/complex-form.component.ts
@@ -1,5 +1,5 @@
 import {
-    AfterViewInit, ChangeDetectorRef, Component, ContentChildren, HostBinding, Input, OnChanges, QueryList, Type,
+    AfterViewInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, HostBinding, Input, OnChanges, QueryList, Type, ViewChild,
 } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { AsyncTask, Dto, ServerError, autobind } from "@batch-flask/core";
@@ -71,6 +71,8 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
 
     @ContentChildren(FormPageComponent) public pages: QueryList<FormPageComponent>;
 
+    @ViewChild('formElement') formElement: ElementRef;
+
     public mainPage: FormPageComponent;
     public currentPage: FormPageComponent;
     public showJsonEditor = false;
@@ -95,6 +97,9 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
         this.currentPage = page;
         this.mainPage = page;
         this.changeDetector.detectChanges();
+        setTimeout(() => {
+            this.focusFirstFocusableElement();
+        })
     }
 
     public ngOnChanges(changes) {
@@ -168,6 +173,10 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
         }
         this._pageStack.push(this.currentPage);
         this.currentPage = page;
+
+        setTimeout(() => {
+            this.focusFirstFocusableElement()
+        });
     }
 
     @autobind()
@@ -268,4 +277,8 @@ export class ComplexFormComponent extends FormBase implements AfterViewInit, OnC
             multiUse: this.multiUse,
         };
     }
+
+    private focusFirstFocusableElement() {
+        this.formElement.nativeElement?.querySelector('[autofocus], button, input, textarea, select')?.focus()
+    }
 }
diff --git a/src/@batch-flask/ui/form/complex-form/complex-form.html b/src/@batch-flask/ui/form/complex-form/complex-form.html
@@ -10,7 +10,7 @@ <h1 *ngIf="currentPage.title">{{currentPage.title}}</h1>
             </div>
         </div>
         <div *ngIf="!showJsonEditor" class="classic-form-container">
-            <form novalidate>
+            <form #formElement novalidate>
                 <ng-template [ngTemplateOutlet]="currentPage.content"></ng-template>
             </form>
         </div>
diff --git a/src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.component.ts b/src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.component.ts
@@ -112,13 +112,13 @@ export class AutoStorageAccountPickerComponent implements OnInit, ControlValueAc
      * to define a custom handler.
      */
     onKeydown(event: KeyboardEvent) {
-        this.classicTooltip.hide();
+        this.classicTooltip?.hide();
         if (event.key === "ArrowDown" || event.key === "ArrowUp" ||
             event.key === "Tab") {
             if (this.selectedStorageAccounts.size === 1) {
                 const id = this.selectedStorageAccounts.values().next().value;
                 if (this.classicAccounts.has(id)) {
-                    this.classicTooltip.show();
+                    this.classicTooltip?.show();
                 }
             }
         }
diff --git a/src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.html b/src/app/components/account/base/auto-storage-account-picker/auto-storage-account-picker.html
@@ -1,6 +1,6 @@
 <bl-loading [status]="loadingStatus">
     <div *ngIf="loadingStatus">
-        <bl-button type="wide" (do)="pickStorageAccount(noSelectionKey)">
+        <bl-button type="wide" (do)="pickStorageAccount(noSelectionKey)" autofocus>
             {{'auto-storage-account-picker.clear-button-label' | i18n}}
         </bl-button>
         <h3>{{'auto-storage-account-picker.same-region-title' | i18n: {
diff --git a/src/app/components/gallery/submit/submit-ncj-template.html b/src/app/components/gallery/submit/submit-ncj-template.html
@@ -10,7 +10,7 @@
     <bl-form-page [title]="title" main-form-page [formGroup]="form">
         <bl-form-section title="Mode" *ngIf="multipleModes">
             <div class="modes">
-                <bl-button type="wide" [class.selected]="modeState === NcjTemplateMode.NewPoolAndJob" (do)="pickMode(NcjTemplateMode.NewPoolAndJob)">Run job with auto pool</bl-button>
+                <bl-button type="wide" [class.selected]="modeState === NcjTemplateMode.NewPoolAndJob" (do)="pickMode(NcjTemplateMode.NewPoolAndJob)" autofocus>Run job with auto pool</bl-button>
                 <bl-button type="wide" [class.selected]="modeState === NcjTemplateMode.ExistingPoolAndJob" (do)="pickMode(NcjTemplateMode.ExistingPoolAndJob)">Run job with existing pool</bl-button>
                 <bl-button type="wide" [class.selected]="modeState === NcjTemplateMode.NewPool" (do)="pickMode(NcjTemplateMode.NewPool)">Create pool for later use</bl-button>
             </div>
diff --git a/src/app/components/job/action/add/job-preparation-task-picker.html b/src/app/components/job/action/add/job-preparation-task-picker.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
     <div class="form-element">
         <bl-form-field>
-            <input blInput formControlName="id" placeholder="ID">
+            <input blInput autofocus formControlName="id" placeholder="ID">
         </bl-form-field>
         <bl-error controlName="id" code="required">ID is a required field</bl-error>
     </div>
diff --git a/src/app/components/job/action/add/job-release-task-picker.html b/src/app/components/job/action/add/job-release-task-picker.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
     <div class="form-element">
         <bl-form-field>
-            <input blInput formControlName="id" placeholder="ID">
+            <input blInput autofocus formControlName="id" placeholder="ID">
         </bl-form-field>
         <bl-error controlName="id" code="required">ID is a required field</bl-error>
     </div>

Original file line number	Diff line number	Diff line change
`@@ -112,13 +112,13 @@ export class AutoStorageAccountPickerComponent implements OnInit, ControlValueAc`
`112`	`112`	`* to define a custom handler.`
`113`	`113`	`*/`
`114`	`114`	`onKeydown(event: KeyboardEvent) {`
`115`		`- this.classicTooltip.hide();`
	`115`	`+ this.classicTooltip?.hide();`
`116`	`116`	`if (event.key === "ArrowDown" \|\| event.key === "ArrowUp" \|\|`
`117`	`117`	`event.key === "Tab") {`
`118`	`118`	`if (this.selectedStorageAccounts.size === 1) {`
`119`	`119`	`const id = this.selectedStorageAccounts.values().next().value;`
`120`	`120`	`if (this.classicAccounts.has(id)) {`
`121`		`- this.classicTooltip.show();`
	`121`	`+ this.classicTooltip?.show();`
`122`	`122`	`}`
`123`	`123`	`}`
`124`	`124`	`}`