fix(a11y): address a11y issues

+ descriptive text for nav links in cs view + descriptive text for reorder widgets buttons + fix screenSizeObserver reports + add notifications on control scheme start/stop
nvsukhanov · Mar 27, 2024 · d5f51ae · d5f51ae
1 parent c48f107
commit d5f51ae
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 13 deletions.
diff --git a/...rc/lib/common/controls/select-controller/binding-control-select-controller.component.html b/...rc/lib/common/controls/select-controller/binding-control-select-controller.component.html
@@ -7,7 +7,6 @@
         @if (syntheticInputControl) {
             <input matInput
                    readonly
-                   [tabIndex]="-1"
                    class="control-select-input"
                    [formControl]="syntheticInputControl"
             />
@@ -16,7 +15,6 @@
         @if (areSettingsVisible) {
             <button mat-icon-button
                     matSuffix
-                    [attr.aria-label]="'controlScheme.showBindingInputSettings' | transloco"
                     (click)="onShowSettings()"
             >
                 @if (arePipesConfigured) {
@@ -30,23 +28,33 @@
                 } @else {
                     <mat-icon [fontIcon]="'settings'"></mat-icon>
                 }
+                <span class="cdk-visually-hidden">
+                    {{ data.inputName$ | async }},
+                    {{ 'controlScheme.showBindingInputSettings' | transloco }}
+                </span>
             </button>
         }
         @if (isControllerAssigned) {
             <button mat-icon-button
                     matSuffix
-                    [attr.aria-label]="'controlScheme.bindingInputControlUnassignButtonTitle' | transloco"
                     (click)="onUnbind()"
             >
                 <mat-icon [fontIcon]="'delete'"></mat-icon>
+                <span class="cdk-visually-hidden">
+                    {{ data.inputName$ | async }},
+                    {{ 'controlScheme.bindingInputControlUnassignButtonTitle' | transloco }}
+                </span>
             </button>
         } @else {
             <button mat-icon-button
                     (click)="onBind()"
                     matSuffix
-                    [attr.aria-label]="'controlScheme.bindingAssignControlButtonTitle' | transloco"
             >
                 <mat-icon [fontIcon]="'edit'"></mat-icon>
+                <span class="cdk-visually-hidden">
+                    {{ data.inputName$ | async }},
+                    {{ 'controlScheme.bindingAssignControlButtonTitle' | transloco }}
+                </span>
             </button>
         }
 

diff --git a/...lib/bindings-section/hub-port-binding-list-item/hub-port-binding-list-item.component.html b/...lib/bindings-section/hub-port-binding-list-item/hub-port-binding-list-item.component.html
@@ -6,6 +6,10 @@
             <a class="binding__operation-type"
                [routerLink]="bindingEditPath()"
             >
+                <span class="cdk-visually-hidden">
+                    {{ hubName() }},
+                    {{ 'hub.port' | transloco: { portId: unwrappedBinding.portId | portIdToPortName } }},
+                </span>
                 {{ unwrappedBinding.bindingType | bindingTypeToL10nKey | transloco }}
             </a>
         </div>

diff --git a/...c/lib/bindings-section/hub-port-binding-list-item/hub-port-binding-list-item.component.ts b/...c/lib/bindings-section/hub-port-binding-list-item/hub-port-binding-list-item.component.ts
@@ -4,9 +4,11 @@ import { MatError } from '@angular/material/form-field';
 import { TranslocoPipe } from '@ngneat/transloco';
 import { Observable } from 'rxjs';
 import { RouterLink } from '@angular/router';
-import { ControlSchemeBinding } from '@app/store';
+import { Store } from '@ngrx/store';
+import { ControlSchemeBinding, HUBS_SELECTORS } from '@app/store';
 import { BindingControllerInputNamePipe, BindingTypeToL10nKeyPipe } from '@app/shared-control-schemes';
 import { RoutesBuilderService, ScreenSizeObserverService } from '@app/shared-misc';
+import { PortIdToPortNamePipe } from '@app/shared-components';
 
 import { BindingActionListItemComponent } from '../binding-action-list-item';
 
@@ -22,7 +24,8 @@ import { BindingActionListItemComponent } from '../binding-action-list-item';
         MatError,
         TranslocoPipe,
         RouterLink,
-        BindingActionListItemComponent
+        BindingActionListItemComponent,
+        PortIdToPortNamePipe
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -44,13 +47,22 @@ export class HubPortBindingListItemComponent {
         return Object.keys(binding.inputs) as (keyof ControlSchemeBinding['inputs'])[];
     });
 
+    public readonly hubName = computed(() => {
+        const binding = this._binding();
+        if (binding === null) {
+            return '';
+        }
+        return this.store.selectSignal(HUBS_SELECTORS.selectHubName(binding.hubId))();
+    });
+
     private _binding: WritableSignal<ControlSchemeBinding | null> = signal(null);
 
     private _controlSchemeName: WritableSignal<string | null> = signal(null);
 
     constructor(
         private readonly screenSizeObserverService: ScreenSizeObserverService,
-        private readonly routesBuilderService: RoutesBuilderService
+        private readonly routesBuilderService: RoutesBuilderService,
+        private readonly store: Store
     ) {
     }
 

diff --git a/...l-scheme-view/src/lib/widgets/reorder-widgets-dialog/reorder-widget-dialog.component.html b/...l-scheme-view/src/lib/widgets/reorder-widgets-dialog/reorder-widget-dialog.component.html
@@ -19,7 +19,7 @@ <h1 mat-dialog-title>
                                       [inline]="true"
                             ></mat-icon>
                             <span class="cdk-visually-hidden">
-                                {{ 'controlScheme.widgets.moveWidgetUp' | transloco }}
+                                {{ 'controlScheme.widgets.moveWidgetUp' | transloco }} {{ widget.title }}
                             </span>
                         </button>
                         <button mat-icon-button
@@ -31,7 +31,7 @@ <h1 mat-dialog-title>
                                       [inline]="true"
                             ></mat-icon>
                             <span class="cdk-visually-hidden">
-                                {{ 'controlScheme.widgets.moveWidgetDown' | transloco }}
+                                {{ 'controlScheme.widgets.moveWidgetDown' | transloco }} {{ widget.title }}
                             </span>
                         </button>
                         <div libEllipsisTitle>

diff --git a/modules/shared/misc/src/lib/screen-size-observer.service.ts b/modules/shared/misc/src/lib/screen-size-observer.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { distinctUntilChanged, map, startWith } from 'rxjs';
+import { distinctUntilChanged, map, shareReplay, startWith } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class ScreenSizeObserverService {
@@ -13,7 +13,8 @@ export class ScreenSizeObserverService {
             Breakpoints.Small,
             Breakpoints.XSmall
         ])),
-        distinctUntilChanged()
+        distinctUntilChanged(),
+        shareReplay(1)
     );
 
     constructor(

diff --git a/modules/store/src/lib/effects/control-scheme/index.ts b/modules/store/src/lib/effects/control-scheme/index.ts
@@ -8,6 +8,8 @@ import { CONSUME_QUEUE_EFFECT } from './consume-queue.effect';
 import { EXECUTE_TASK_EFFECT } from './execute-task.effect';
 import { NOTIFY_ON_CONTROL_SCHEME_IMPORTED_EFFECT } from './notify-on-control-scheme-imported.effect';
 import { NOTIFY_ON_CONTROL_SCHEME_START_FAILURE_EFFECT } from './notify-on-control-scheme-start-failure.effect';
+import { NOTIFY_ON_CONTROL_SCHEME_STARTED_EFFECT } from './notify-on-control-scheme-started.effect';
+import { NOTIFY_ON_CONTROL_SCHEME_STOPPED_EFFECT } from './notify-on-control-scheme-stopped.effect';
 
 export * from './i-task-filter';
 export * from './i-task-runner';
@@ -24,4 +26,6 @@ export const CONTROL_SCHEME_EFFECTS: {[name in string]: FunctionalEffect} = {
     executeTask: EXECUTE_TASK_EFFECT,
     notifyOnControlSchemeImported: NOTIFY_ON_CONTROL_SCHEME_IMPORTED_EFFECT,
     notifyOnControlSchemeStartFailure: NOTIFY_ON_CONTROL_SCHEME_START_FAILURE_EFFECT,
+    notifyOnControlSchemeStarted: NOTIFY_ON_CONTROL_SCHEME_STARTED_EFFECT,
+    notifyOnControlSchemeStopped: NOTIFY_ON_CONTROL_SCHEME_STOPPED_EFFECT,
 } as const;
diff --git a/modules/store/src/lib/effects/control-scheme/notify-on-control-scheme-started.effect.ts b/modules/store/src/lib/effects/control-scheme/notify-on-control-scheme-started.effect.ts
@@ -0,0 +1,19 @@
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { inject } from '@angular/core';
+import { map } from 'rxjs';
+
+import { CONTROL_SCHEME_ACTIONS, SHOW_NOTIFICATION_ACTIONS } from '../../actions';
+
+export const NOTIFY_ON_CONTROL_SCHEME_STARTED_EFFECT = createEffect((
+    actions: Actions = inject(Actions),
+) => {
+    return actions.pipe(
+        ofType(CONTROL_SCHEME_ACTIONS.schemeStarted),
+        map((action) => {
+            return SHOW_NOTIFICATION_ACTIONS.info({
+                l10nKey: 'controlScheme.runSuccessNotification',
+                l10nPayload: action
+            });
+        })
+    );
+}, { functional: true });
diff --git a/modules/store/src/lib/effects/control-scheme/notify-on-control-scheme-stopped.effect.ts b/modules/store/src/lib/effects/control-scheme/notify-on-control-scheme-stopped.effect.ts
@@ -0,0 +1,16 @@
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { inject } from '@angular/core';
+import { map } from 'rxjs';
+
+import { CONTROL_SCHEME_ACTIONS, SHOW_NOTIFICATION_ACTIONS } from '../../actions';
+
+export const NOTIFY_ON_CONTROL_SCHEME_STOPPED_EFFECT = createEffect((
+    actions: Actions = inject(Actions),
+) => {
+    return actions.pipe(
+        ofType(CONTROL_SCHEME_ACTIONS.schemeStopped),
+        map(() => {
+            return SHOW_NOTIFICATION_ACTIONS.info({ l10nKey: 'controlScheme.stopNotification'});
+        })
+    );
+}, { functional: true });
diff --git a/src/app/nav-menu/full-nav-menu/full-nav-menu.component.html b/src/app/nav-menu/full-nav-menu/full-nav-menu.component.html
@@ -4,6 +4,7 @@
 
         <h1 class="title">
             <a class="root-link"
+               tabindex="-1"
                [routerLink]="routesBuilderService.root">
                 {{ 'appName' | transloco }}
             </a>

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -50,7 +50,7 @@
     "controllersList": "Controllers",
     "hubsList": "Hubs",
     "controlSchemesList": "Control schemes",
-    "navMenuAriaLabel": "Menu",
+    "navMenuAriaLabel": "App menu",
     "aboutPageButton": "About",
     "settingsPageButton": "Settings",
     "help": "Help"
@@ -188,6 +188,8 @@
     "editNameSaveButtonTitle": "Save",
     "editNameCancelButtonTitle": "Cancel",
     "run": "Start",
+    "runSuccessNotification": "Control scheme ''{ name }'' started",
+    "stopNotification": "Control scheme stopped",
     "runFailed": "Failed to start",
     "runFailedCalibrationOutOfRange": "Failed to start due to servo calibration failure: range is out of bounds",
     "runBlockerSchemeDoesNotExist": "Control scheme does not exist",

diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json
@@ -50,7 +50,7 @@
     "controllersList": "Контроллеры",
     "hubsList": "Хабы",
     "controlSchemesList": "Схемы управления",
-    "navMenuAriaLabel": "Меню",
+    "navMenuAriaLabel": "Меню приложения",
     "aboutPageButton": "О программе",
     "settingsPageButton": "Настройки",
     "help": "Помощь"
@@ -188,6 +188,8 @@
     "editNameSaveButtonTitle": "Сохранить",
     "editNameCancelButtonTitle": "Отмена",
     "run": "Старт",
+    "runSuccessNotification": "Схема управления ''{ name }'' запущена",
+    "stopNotification": "Схема управления остановлена",
     "runFailed": "Не удалось запустить схему управления",
     "runFailedCalibrationOutOfRange": "Не удалось запустить схему управления из-за ошибки калибровки: диапазон больше допустимого",
     "runBlockerSchemeDoesNotExist": "Схема управления не существует",