diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 340ec30..6a74caf 100644 --- 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 index ef00a46..4612b0b 100644 --- a/src/app/components/deployment-form/deployment-form.component.html +++ b/src/app/components/deployment-form/deployment-form.component.html @@ -3,7 +3,7 @@

{{ title }}

-
+ Node @@ -28,7 +28,7 @@

DD.MM.YYYY – DD.MM.YYYY (leave a date empty for unbounded range) errors - + diff --git a/src/app/components/node-form/node-form.component.html b/src/app/components/node-form/node-form.component.html index c52ac19..f131733 100644 --- a/src/app/components/node-form/node-form.component.html +++ b/src/app/components/node-form/node-form.component.html @@ -3,13 +3,13 @@

{{ title }}

- + Name (a.k.a. Node Label / ID) {{ getErrorMessage() }} - diff --git a/src/app/components/node-form/node-form.component.ts b/src/app/components/node-form/node-form.component.ts index 8f0bb7a..6e3624c 100644 --- 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; @ViewChild('deleteError') deleteErrorDialog: TemplateRef; + @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); }