fix(a11y): improve screen reader and keyboard access

e2e/src/domains.spec.ts

@@ -193,7 +193,7 @@ test.describe('Domains', () => {
             // The list is empty while it loads, so wait for the load to end
             await expect(
                 domains.tabContent.locator('mat-progress-bar'),
-            ).toHaveClass(/opacity-0/);
+            ).toBeHidden();
             await expect(domains.tabContent).toContainText(
                 'No users associated with this domain',
             );

public/assets/locale/en-AU.json

@@ -49,6 +49,13 @@
         "CANCEL": "Cancel",
         "CLOSE": "Close",
         "MENU": "Menu",
+        "MAIN_MENU": "Main menu",
+        "SKIP_TO_CONTENT": "Skip to main content",
+        "LOADING": "Loading",
+        "MOVE_ROW": "Move row",
+        "ACTIONS": "Actions",
+        "SELECT_ALL_ROWS": "Select all rows",
+        "SELECT_ROW": "Select row",
         "CLEAR_VALUE": "Clear",
         "REMOVE": "Remove",
         "VIEW": "View",
@@ -319,6 +326,8 @@
         "COPY_WEBHOOK": "Copy webhook",
         "COPIED_WEBHOOK": "Webhook link copied to clipboard",
         "TRIGGER_FIELD_NAME": "Name",
+        "TRIGGER_TRIGGERED": "Triggered",
+        "TRIGGER_NOT_TRIGGERED": "Not triggered",
         "TRIGGER_FIELD_COUNT": "Count",
         "TRIGGER_FIELD_ERRORS": "Errors",
         "TRIGGER_FIELD_ADDED": "Added",
@@ -395,7 +404,12 @@
         "STATE": "Module State",
         "STATE_UPDATE": "Update state",
         "STATE_LOADING": "Loading module's state...",
-        "ERROR": "Runtime error in the module"
+        "ERROR": "Runtime error in the module",
+        "STATUS_LABEL": "Connection status: {{ status }}",
+        "STATUS_STOPPED": "Stopped",
+        "STATUS_CONNECTING": "Connecting",
+        "STATUS_CONNECTED": "Connected",
+        "STATUS_DISCONNECTED": "Disconnected"
     },
     "ZONES": {
         "SINGULAR": "Zone",

src/app/admin/admin.component.ts

@@ -23,8 +23,9 @@ import { TranslatePipe } from '../ui/translate.pipe';
             <sidebar-menu [(open)]="open_menu" class="sm:h-full" />
             <div class="flex h-full w-px flex-1 flex-col overflow-hidden">
                 <div class="z-0 flex h-1/2 flex-1">
-                    <div
+                    <nav
                         class="border-base-200 relative z-10 h-full space-y-2 overflow-auto border-r px-2 pt-10 sm:w-56 sm:py-4"
+                        [attr.aria-label]="'COMMON.MANAGE' | translate"
                     >
                         @for (item of tab_list(); track item.id) {
                             <a
@@ -34,6 +35,7 @@ import { TranslatePipe } from '../ui/translate.pipe';
                                 [routerLink]="'/admin/' + item.id"
                                 [queryParams]="item.query || {}"
                                 routerLinkActive="bg-secondary! text-secondary-content"
+                                ariaCurrentWhenActive="page"
                             >
                                 <div class="flex w-full items-center space-x-2">
                                     <icon class="text-2xl" [icon]="item.icon" />
@@ -43,10 +45,14 @@ import { TranslatePipe } from '../ui/translate.pipe';
                                 </div>
                             </a>
                         }
-                    </div>
-                    <div class="relative z-0 h-full w-1/2 flex-1 overflow-auto">
+                    </nav>
+                    <main
+                        id="main-content"
+                        tabindex="-1"
+                        class="relative z-0 h-full w-1/2 flex-1 overflow-auto outline-none"
+                    >
                         <router-outlet />
-                    </div>
+                    </main>
                     <button
                         icon
                         matRipple

src/app/admin/api-keys/api-keys.component.ts

@@ -10,6 +10,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { i18n } from '../../common/locale.service';
 import { notifyInfo } from '../../common/notifications';
 import { IconComponent } from '../../ui/icon.component';
+import { LoadingLabelDirective } from '../../ui/loading-label.directive';
 import { DateFromPipe } from '../../ui/pipes/date-from.pipe';
 import { SimpleTableComponent } from '../../ui/simple-table.component';
 import { TranslatePipe } from '../../ui/translate.pipe';
@@ -95,7 +96,7 @@ import { APIKeyService } from './api-keys.service';
                 <mat-progress-bar
                     mode="indeterminate"
                     class="w-full"
-                    [class.opacity-0]="loading() !== true"
+                    [class.invisible]="loading() !== true"
                 />
                 <simple-table
                     class="block min-w-7xl text-sm"
@@ -133,7 +134,8 @@ import { APIKeyService } from './api-keys.service';
                         },
                         {
                             key: 'actions',
-                            name: ' ',
+                            name: 'COMMON.ACTIONS' | translate,
+                            hide_name: true,
                             content: actions_template,
                             size: '6rem',
                             sortable: false,
@@ -222,6 +224,7 @@ import { APIKeyService } from './api-keys.service';
     `,
     styles: [``],
     imports: [
+        LoadingLabelDirective,
         TranslatePipe,
         IconComponent,
         MatRippleModule,

src/app/admin/brokers.component.ts

@@ -20,6 +20,7 @@ import { notifyError, notifySuccess } from '../common/notifications';
 import { FormModalComponent } from '../common/types';
 import { openConfirmModal } from '../overlays/confirm-modal.component';
 import { IconComponent } from '../ui/icon.component';
+import { LoadingLabelDirective } from '../ui/loading-label.directive';
 import { SimpleTableComponent } from '../ui/simple-table.component';
 import { TranslatePipe } from '../ui/translate.pipe';
 import { BrokerFormComponent } from './broker-form.component';
@@ -50,7 +51,7 @@ import { BrokerFormComponent } from './broker-form.component';
                 <mat-progress-bar
                     mode="indeterminate"
                     class="w-full"
-                    [class.opacity-0]="!loading()"
+                    [class.invisible]="!loading()"
                 />
                 <simple-table
                     class="block min-w-5xl text-sm"
@@ -90,7 +91,8 @@ import { BrokerFormComponent } from './broker-form.component';
                         },
                         {
                             key: 'actions',
-                            name: ' ',
+                            name: 'COMMON.ACTIONS' | translate,
+                            hide_name: true,
                             size: '6rem',
                             content: actions_template,
                             sortable: false,
@@ -185,6 +187,7 @@ import { BrokerFormComponent } from './broker-form.component';
         `,
     ],
     imports: [
+        LoadingLabelDirective,
         IconComponent,
         MatRippleModule,
         MatTooltipModule,

src/app/admin/build-list.component.ts

@@ -11,6 +11,7 @@ import { i18n } from '../common/locale.service';
 import { notifyError, notifySuccess } from '../common/notifications';
 import { openConfirmModal } from '../overlays/confirm-modal.component';
 import { IconComponent } from '../ui/icon.component';
+import { LoadingLabelDirective } from '../ui/loading-label.directive';
 import { SimpleTableComponent } from '../ui/simple-table.component';
 import { TranslatePipe } from '../ui/translate.pipe';
 
@@ -52,7 +53,7 @@ function cancelBuildJob(id, q = {}) {
                 <mat-progress-bar
                     mode="indeterminate"
                     class="w-full"
-                    [class.opacity-0]="!loading()"
+                    [class.invisible]="!loading()"
                 />
                 <simple-table
                     class="block min-w-5xl text-sm"
@@ -76,7 +77,8 @@ function cancelBuildJob(id, q = {}) {
                         },
                         {
                             key: 'actions',
-                            name: ' ',
+                            name: 'COMMON.ACTIONS' | translate,
+                            hide_name: true,
                             content: actions_template,
                             size: '3.5rem',
                             sortable: false,
@@ -133,6 +135,7 @@ function cancelBuildJob(id, q = {}) {
         `,
     ],
     imports: [
+        LoadingLabelDirective,
         IconComponent,
         MatRippleModule,
         MatTooltipModule,

src/app/admin/cluster-details/cluster-task-list.component.ts

@@ -33,6 +33,7 @@ import {
     ConfirmModalComponent,
 } from '../../overlays/confirm-modal.component';
 import { IconComponent } from '../../ui/icon.component';
+import { LoadingLabelDirective } from '../../ui/loading-label.directive';
 import { SimpleTableComponent } from '../../ui/simple-table.component';
 import { TranslatePipe } from '../../ui/translate.pipe';
 
@@ -80,7 +81,7 @@ const task_details = {};
                 <mat-progress-bar
                     mode="indeterminate"
                     class="w-full"
-                    [class.opacity-0]="!loading()"
+                    [class.invisible]="!loading()"
                 />
             </div>
             <div class="mb-4 w-full overflow-auto px-4">
@@ -113,7 +114,8 @@ const task_details = {};
                         },
                         {
                             key: 'actions',
-                            name: ' ',
+                            name: 'COMMON.ACTIONS' | translate,
+                            hide_name: true,
                             content: actions_template,
                             size: '3.5rem',
                             sortable: false,
@@ -178,6 +180,7 @@ const task_details = {};
         `,
     ],
     imports: [
+        LoadingLabelDirective,
         SimpleTableComponent,
         IconComponent,
         MatRippleModule,

src/app/admin/database-details.component.ts

@@ -21,6 +21,7 @@ import {
     notifyWarn,
 } from '../common/notifications';
 import { openConfirmModal } from '../overlays/confirm-modal.component';
+import { LoadingLabelDirective } from '../ui/loading-label.directive';
 import { ZoneTreeExportModalComponent } from './zone-tree-export-modal.component';
 
 /** How often a running MQTT re-sync is checked on */
@@ -223,7 +224,12 @@ async function queryAllZones(query_params: Record<string, unknown> = {}) {
             }
         `,
     ],
-    imports: [MatProgressSpinnerModule, MatRippleModule, MatDialogModule],
+    imports: [
+        LoadingLabelDirective,
+        MatProgressSpinnerModule,
+        MatRippleModule,
+        MatDialogModule,
+    ],
 })
 export class PlaceDatabaseDetailsComponent
     extends AsyncHandler

src/app/admin/edge.component.ts

@@ -11,6 +11,7 @@ import { escapeHtml } from '../common/general';
 import { notifyError, notifySuccess } from '../common/notifications';
 import { openConfirmModal } from '../overlays/confirm-modal.component';
 import { IconComponent } from '../ui/icon.component';
+import { LoadingLabelDirective } from '../ui/loading-label.directive';
 import { DateFromPipe } from '../ui/pipes/date-from.pipe';
 import { SimpleTableComponent } from '../ui/simple-table.component';
 import { TranslatePipe } from '../ui/translate.pipe';
@@ -60,15 +61,16 @@ import { EdgeModalComponent } from './edge-modal.component';
                 <mat-progress-bar
                     mode="indeterminate"
                     class="w-full"
-                    [class.opacity-0]="!loading()"
+                    [class.invisible]="!loading()"
                 />
                 <simple-table
                     class="block min-w-5xl text-sm"
                     [data]="edge_list()"
                     [columns]="[
                         {
                             key: 'online',
-                            name: ' ',
+                            name: 'COMMON.ONLINE' | translate,
+                            hide_name: true,
                             content: bool_template,
                         },
                         {
@@ -89,7 +91,8 @@ import { EdgeModalComponent } from './edge-modal.component';
                         },
                         {
                             key: 'actions',
-                            name: ' ',
+                            name: 'COMMON.ACTIONS' | translate,
+                            hide_name: true,
                             content: actions_template,
                             size: '6rem',
                             sortable: false,
@@ -124,6 +127,12 @@ import { EdgeModalComponent } from './edge-modal.component';
                     [class.bg-success]="data"
                     [class.bg-error]="!data"
                 ></div>
+                <!-- The tooltip is not reachable, so name the state for screen readers -->
+                <span class="sr-only">
+                    {{
+                        (data ? 'COMMON.ONLINE' : 'COMMON.OFFLINE') | translate
+                    }}
+                </span>
             </div>
         </ng-template>
         <ng-template #description_template let-data="data">
@@ -170,6 +179,7 @@ import { EdgeModalComponent } from './edge-modal.component';
         `,
     ],
     imports: [
+        LoadingLabelDirective,
         IconComponent,
         TranslatePipe,
         MatRippleModule,

src/app/admin/extensions.component.ts

@@ -22,6 +22,7 @@ import {
     ConfirmModalData,
 } from '../overlays/confirm-modal.component';
 import { IconComponent } from '../ui/icon.component';
+import { LoadingLabelDirective } from '../ui/loading-label.directive';
 import { SimpleTableComponent } from '../ui/simple-table.component';
 import { TranslatePipe } from '../ui/translate.pipe';
 import { AdminDataService } from './admin-data.service';
@@ -83,7 +84,7 @@ const isSameExtension = (a: BackofficeExtension, b?: BackofficeExtension) =>
                 <mat-progress-bar
                     mode="indeterminate"
                     class="w-full"
-                    [class.opacity-0]="!loading()"
+                    [class.invisible]="!loading()"
                 />
                 <simple-table
                     class="block min-w-4xl text-sm"
@@ -113,7 +114,8 @@ const isSameExtension = (a: BackofficeExtension, b?: BackofficeExtension) =>
                         },
                         {
                             key: 'actions',
-                            name: ' ',
+                            name: 'COMMON.ACTIONS' | translate,
+                            hide_name: true,
                             size: '6rem',
                             content: actions_template,
                             sortable: false,
@@ -172,6 +174,7 @@ const isSameExtension = (a: BackofficeExtension, b?: BackofficeExtension) =>
         `,
     ],
     imports: [
+        LoadingLabelDirective,
         IconComponent,
         MatRippleModule,
         MatTooltipModule,

src/app/admin/interfaces.component.ts

@@ -4,6 +4,7 @@ import { listInterfaceRepositories } from '@placeos/ts-client';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { describeError } from '../common/errors';
 import { notifyError } from '../common/notifications';
+import { LoadingLabelDirective } from '../ui/loading-label.directive';
 import { SimpleTableComponent } from '../ui/simple-table.component';
 import { TranslatePipe } from '../ui/translate.pipe';
 
@@ -17,7 +18,7 @@ import { TranslatePipe } from '../ui/translate.pipe';
             <mat-progress-bar
                 mode="indeterminate"
                 class="w-full"
-                [class.opacity-0]="!loading()"
+                [class.invisible]="!loading()"
             />
             <simple-table
                 class="block min-w-xl text-sm"
@@ -57,7 +58,12 @@ import { TranslatePipe } from '../ui/translate.pipe';
             }
         `,
     ],
-    imports: [SimpleTableComponent, TranslatePipe, MatProgressBarModule],
+    imports: [
+        LoadingLabelDirective,
+        SimpleTableComponent,
+        TranslatePipe,
+        MatProgressBarModule,
+    ],
 })
 export class AdminInterfacesComponent implements OnInit {
     /** List of interfaces */