feat(ui): implement GAR 2027 (WCAG 2.2 AA) accessibility improvements

modules/ui/src/app/app.component.scss

@@ -209,7 +209,7 @@ $nav-width: 96px;
   position: relative;
   display: grid;
   grid-template-rows: auto 0 1fr;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .settings-drawer {

modules/ui/src/app/components/device-item/device-item.component.scss

@@ -35,7 +35,7 @@ $border-radius: 12px;
 .device-item-basic {
   padding: 0 24px 0 32px;
   width: variables.$device-item-width;
-  height: 92px;
+  min-height: 92px;
   box-shadow:
     0px 1px 2px 0px rgba(0, 0, 0, 0.3),
     0px 1px 3px 1px rgba(0, 0, 0, 0.15);

modules/ui/src/app/components/device-tests/device-tests.component.html

@@ -14,11 +14,16 @@
 limitations under the License.
 -->
 <form [formGroup]="deviceForm" class="device-tests-form">
-  <p class="device-tests-title">Test modules</p>
-  <p class="device-tests-description">
+  <p class="device-tests-title" id="device-tests-title">Test modules</p>
+  <p class="device-tests-description" id="device-tests-description">
     All modules are required to pass for qualification
   </p>
-  <section class="device-form-test-modules" formArrayName="test_modules">
+  <section
+    class="device-form-test-modules"
+    role="group"
+    aria-labelledby="device-tests-title"
+    aria-describedby="device-tests-description"
+    formArrayName="test_modules">
     @for (test of test_modules.controls; track test; let i = $index) {
       <p [class.disabled]="disabled">
         <mat-checkbox [formControlName]="i" [tabIndex]="disabled ? -1 : 0">

modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts

@@ -87,12 +87,17 @@ describe('DownloadReportZipComponent', () => {
       }));
     });
 
-    it('should have title', () => {
+    it('should have title and accessible role and label', () => {
       component.ngOnInit();
+      fixture.detectChanges();
 
       expect(component.tooltip.message).toEqual(
         'Download zip for Testrun # Delta 03-DIN-CPU 1.2.2 22 Jun 2023 9:20'
       );
+      expect(compiled.getAttribute('role')).toEqual('button');
+      expect(compiled.getAttribute('aria-label')).toEqual(
+        'Download zip for Testrun # Delta 03-DIN-CPU 1.2.2 22 Jun 2023 9:20'
+      );
     });
   });
 

modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts

@@ -77,6 +77,16 @@ export class DownloadReportZipComponent
   @HostBinding('tabIndex')
   readonly tabIndex = 0;
 
+  @HostBinding('attr.role')
+  readonly role = 'button';
+
+  @HostBinding('attr.aria-label')
+  get ariaLabel(): string {
+    return this.data
+      ? `Download zip for Testrun # ${this.getTestRunId(this.data)}`
+      : 'Download ZIP file';
+  }
+
   @HostListener('mouseenter')
   @HostListener('keyup')
   onEvent(): void {

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html

@@ -15,7 +15,7 @@
 -->
 @if (data.testrunStatus) {
   <div class="testing-result-heading">
-    <p class="testing-result-title">
+    <p class="testing-result-title" role="heading" aria-level="2">
       {{ data.testrunStatus.device.manufacturer }}
       {{ data.testrunStatus.device.model }}
       {{ data.testrunStatus.device.firmware }}
@@ -43,7 +43,9 @@
   </div>
 }
 @if (!data.testrunStatus) {
-  <span class="risk-profile-select-form-title">Download ZIP file</span>
+  <span class="risk-profile-select-form-title" role="heading" aria-level="2"
+    >Download ZIP file</span
+  >
 }
 @if (profiles.length === 1) {
   <p class="risk-profile-select-form-content">

modules/ui/src/app/components/dynamic-form/dynamic-form.component.html

@@ -37,7 +37,10 @@
   let-description="description"
   let-options="options"
   let-formControlName="formControlName">
-  <label class="field-label" for="{{ formControlName }}-group">
+  <label
+    class="field-label"
+    id="field-label-{{ formControlName }}"
+    for="{{ formControlName }}-group">
     {{ label }}
   </label>
   @switch (type) {
@@ -232,6 +235,8 @@
   let-description="description">
   <section
     class="field-select-multiple form-field"
+    role="group"
+    [attr.aria-labelledby]="'field-label-' + formControlName"
     [formGroup]="getFormGroup(formControlName)">
     @for (option of options; track option; let i = $index) {
       <p class="field-select-checkbox">
@@ -280,9 +285,7 @@
     }
     @if (getControl(formControlName).hasError('required')) {
       <mat-error>
-        <span role="alert" aria-live="assertive" [attr.aria-label]="label">
-          The field is required
-        </span>
+        <span role="alert" aria-live="assertive"> The field is required </span>
       </mat-error>
     }
   </mat-form-field>

modules/ui/src/app/components/empty-message/empty-message.component.html

@@ -17,7 +17,7 @@
   class="empty-message"
   [ngClass]="isHorizontal() ? 'horizontal' : 'vertical'">
   <div class="empty-message-img">
-    <img [src]="image()" alt="empty message image" />
+    <img [src]="image()" alt="" />
   </div>
   <span class="empty-message-text" [class.one-line]="!message()">
     <span class="empty-message-header">{{ header() }}</span>

modules/ui/src/app/components/help-tip/help-tip.component.ts

@@ -52,6 +52,11 @@ export class HelpTipComponent implements OnInit {
     this.updateTipPosition(this.target());
   }
 
+  @HostListener('keydown.escape')
+  onEscape() {
+    this.onCLoseTip.emit(true);
+  }
+
   ngOnInit() {
     this.updateTipPosition(this.target());
     this.liveAnnouncer.announce(

modules/ui/src/app/components/list-item/list-item.component.html

@@ -15,6 +15,7 @@
 -->
 <div
   class="list-item"
+  role="listitem"
   [class.disabled]="disabled"
   [class.no-actions-menu]="!actions().length">
   <ng-content></ng-content>
@@ -23,8 +24,8 @@
       [disabled]="disabled"
       fontSet="material-symbols-outlined"
       mat-icon-button
-      aria-label="Actions"
-      matTooltip="Actions"
+      [attr.aria-label]="actionsLabel"
+      [matTooltip]="actionsLabel"
       [matMenuTriggerFor]="menu">
       <mat-icon>more_vert</mat-icon>
     </button>

modules/ui/src/app/components/list-item/list-item.component.ts

@@ -64,6 +64,18 @@ export class ListItemComponent<T extends object> implements OnInit {
     return false;
   }
 
+  get actionsLabel(): string {
+    const entity = this.entity() as {
+      name?: string;
+      manufacturer?: string;
+      model?: string;
+    };
+    const itemName =
+      entity?.name ||
+      [entity?.manufacturer, entity?.model].filter(Boolean).join(' ').trim();
+    return itemName ? `Actions for ${itemName}` : 'Actions';
+  }
+
   @HostListener('mouseenter', ['$event'])
   onEvent(event: MouseEvent): void {
     this.zone.run(() => {

modules/ui/src/app/components/list-layout/list-layout.component.html

@@ -60,9 +60,12 @@
         </mat-toolbar-row>
       </mat-toolbar>
       <div class="entity-list-container">
-        <section class="entity-list">
+        <section
+          class="entity-list"
+          role="list"
+          [attr.aria-label]="title() + ' list'">
           @if (isOpenEntityForm() && !initialEntity()) {
-            <div class="fake-list-item">
+            <div class="fake-list-item" role="listitem">
               <mat-icon fontSet="material-symbols-outlined">edit_note</mat-icon>
               {{
                 title() === LayoutType.Device
@@ -92,7 +95,7 @@
     </mat-drawer>
     <mat-drawer-content>
       @if (content()) {
-        <section class="content">
+        <section class="content" [attr.aria-label]="title() + ' details'">
           <ng-container *ngTemplateOutlet="content()!"></ng-container>
         </section>
       }

modules/ui/src/app/components/list-layout/list-layout.component.scss

@@ -99,7 +99,7 @@
   align-self: stretch;
   border-radius: variables.$corner-extra-large;
   background-color: colors.$surface-container-high;
-  height: 40px;
+  min-height: 40px;
   width: 100%;
   input {
     width: calc(100% - #{variables.$icon-size * 2});
@@ -137,15 +137,15 @@
   font-size: 16px;
   border-radius: 16px;
   width: fit-content;
-  height: 56px;
+  min-height: 56px;
   color: colors.$on-secondary-container;
   background-color: colors.$secondary-container;
 }
 
 .fake-list-item {
   border-radius: 16px;
   background-color: colors.$primary-container;
-  height: 92px;
+  min-height: 92px;
   padding: 0 24px 0 32px;
   display: flex;
   gap: 24px;
@@ -156,3 +156,10 @@
   font-size: 16px;
   letter-spacing: 0;
 }
+
+@media (max-width: 768px) {
+  .layout-container-left-panel {
+    width: 100%;
+    max-width: 100vw;
+  }
+}

modules/ui/src/app/components/side-button-menu/side-button-menu.component.html

@@ -19,8 +19,9 @@
   #menu="matMenu"
   class="side-add-menu"
   backdropClass="side-add-menu-backdrop">
-  <div class="side-add-menu-triangle">
+  <div class="side-add-menu-triangle" aria-hidden="true">
     <svg
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       width="12"
       height="20"

modules/ui/src/app/components/simple-dialog/simple-dialog.component.html

@@ -14,13 +14,15 @@
 limitations under the License.
 -->
 @if (data.icon) {
-  <span class="simple-dialog-icon"
+  <span class="simple-dialog-icon" aria-hidden="true"
     ><mat-icon fontSet="material-symbols-outlined">{{
       data.icon
     }}</mat-icon></span
   >
 }
-<span class="simple-dialog-title">{{ data.title }}</span>
+<span class="simple-dialog-title" role="heading" aria-level="2">{{
+  data.title
+}}</span>
 <p class="simple-dialog-content">
   {{ data.content }}
 </p>

modules/ui/src/app/components/stepper/stepper.component.html

@@ -35,12 +35,13 @@
       [attr.aria-label]="getNavigationLabel(selectedIndex)">
       <mat-icon fontSet="material-symbols-outlined"> arrow_back </mat-icon>
     </button>
-    <div class="form-steps">
+    <div class="form-steps" role="group" aria-label="Form steps">
       @for (step of steps; track step; let i = $index) {
         <div
           class="form-step"
           [tabindex]="selectedIndex === i ? 0 : -1"
           [class.step-active]="selectedIndex === i"
+          [attr.aria-current]="selectedIndex === i ? 'step' : null"
           [matTooltip]="getStepLabel(selectedIndex === i)"
           [attr.aria-label]="getStepLabel(selectedIndex === i)"></div>
       }

modules/ui/src/app/components/stepper/stepper.component.scss

@@ -50,12 +50,18 @@
 }
 
 .form-step {
-  border: 2px solid colors.$lighter-grey;
+  border: 2px solid colors.$outline;
   width: 4px;
   height: 4px;
   display: inline-block;
   border-radius: 100%;
   margin: 0 8px;
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -10px;
+  }
   &.step-active {
     border-color: colors.$secondary;
     background: colors.$secondary;

modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html

@@ -89,6 +89,7 @@ <h2 tabindex="-1">Welcome to Testrun!</h2>
         id="devices-link"
         (click)="confirm(optOut, Routes.Devices)"
         (keydown.enter)="confirm(optOut, Routes.Devices)"
+        (keydown.space)="confirm(optOut, Routes.Devices)"
         tabindex="0"
         role="button"
         class="message-link">
@@ -99,6 +100,7 @@ <h2 tabindex="-1">Welcome to Testrun!</h2>
         id="risk-profiles-link"
         (click)="confirm(optOut, Routes.RiskAssessment)"
         (keydown.enter)="confirm(optOut, Routes.RiskAssessment)"
+        (keydown.space)="confirm(optOut, Routes.RiskAssessment)"
         tabindex="0"
         role="button"
         class="message-link">

modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html

@@ -32,7 +32,7 @@
         *matHeaderCellDef
         mat-header-cell
         mat-sort-header
-        sortActionDescription="Sort by duration time">
+        sortActionDescription="Sort by organisation">
         Organisation
       </th>
       <td *matCellDef="let data" class="text-nowrap" mat-cell>
@@ -44,7 +44,7 @@
         *matHeaderCellDef
         mat-header-cell
         mat-sort-header
-        sortActionDescription="Sort by duration time">
+        sortActionDescription="Sort by expiration date">
         Expires
       </th>
       <td *matCellDef="let data" class="text-nowrap" mat-cell>
@@ -82,7 +82,7 @@
       </td>
     </ng-container>
     <ng-container matColumnDef="actions">
-      <th *matHeaderCellDef mat-header-cell></th>
+      <th *matHeaderCellDef mat-header-cell aria-label="Actions"></th>
       <td
         *matCellDef="let data"
         class="table-cell-actions"

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html

@@ -26,6 +26,7 @@
         formControlName="manufacturer"
         placeholder="Device Manufacturer"
         matInput />
+      <mat-hint>Max 28 characters (letters and numbers)</mat-hint>
       @if (manufacturer.hasError('invalid_format')) {
         <mat-error class="error-multiline" role="alert" aria-live="assertive">
           <span
@@ -51,6 +52,7 @@
         formControlName="model"
         placeholder="New Device"
         matInput />
+      <mat-hint>Max 28 characters (letters and numbers)</mat-hint>
       @if (model.hasError('invalid_format')) {
         <mat-error class="error-multiline" role="alert" aria-live="assertive">
           <span
@@ -81,6 +83,7 @@
         mask="AA:AA:AA:AA:AA:AA"
         shownMaskExpression="__:__:__:__:__:__"
         type="text" />
+      <mat-hint>Format: XX:XX:XX:XX:XX:XX (12 hex digits)</mat-hint>
       @if (mac_addr.errors?.['required'] && !mac_addr.errors?.['pattern']) {
         <mat-error>
           <span>MAC address is <strong>required</strong></span>
@@ -104,12 +107,14 @@
       }
     </mat-form-field>
 
-    <mat-label class="device-qualification-form-journey-label"
+    <mat-label
+      id="testing-journey-label"
+      class="device-qualification-form-journey-label"
       >Please, select the testing journey for device</mat-label
     >
-    <input matInput style="display: none" />
 
     <mat-radio-group
+      aria-labelledby="testing-journey-label"
       formControlName="test_pack"
       class="device-qualification-form-journey">
       <mat-radio-button