From 5167dbbc28cdb9236c14fa01f271e8eee413f195 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 27 Oct 2026 12:19:07 +0000
Subject: [PATCH] feat(ui): implement GAR 2027 (WCAG 2.2 AA) accessibility
 improvements Update components, templates, and styles across modules/ui to
 satisfy GAR 2027 accessibility requirements: - Accessibility Labels &
 Relationships (P0):   - Fix broken aria-labelledby reference and associate
 description text via     aria-describedby in settings-dropdown.   - Fix
 uninterpolated aria-label expression on delete-report button.   - Add
 role="button" and contextual aria-label host bindings to    
 app-download-report-zip.   - Associate multi-select checkbox groups and test
 module groups with their     headings/descriptions using role="group",
 aria-labelledby, and     aria-describedby in dynamic-form,
 device-qualification-from, and     device-tests; remove overriding aria-label
 on required field errors.   - Fix copy-pasted mat-sort-header
 sortActionDescription values and add     accessible labels to icon-only table
 header columns in certificates-table     and testrun-table.   - Add
 aria-label attributes to start/end date range inputs in filter-dialog.   -
 Add semantic list roles (role="list", role="listitem"), region labels, and   
  contextual action menu labels ("Actions for <name>") in list-layout and    
 list-item. - Screen Reader Updates, Focus & Keyboard Navigation (P0):   -
 Change testrun-status-card live region from assertive alert to polite    
 status and deduplicate countdown timer live announcements.   - Add visible
 :focus-within outline and >= 3:1 border contrast to the     custom report
 search input.   - Add Escape key dismissal and aria-haspopup/aria-expanded
 attributes to     download-options and help-tip popups, and Space key
 activation to     role="button" links in consent-dialog. - Clear Purpose,
 Instructions, Text Alternatives & Headings (P1):   - Replace vague "here"
 link text with descriptive "Google Terms of Service"     and underline inline
 links so they do not rely on color alone.   - Add persistent mat-hint format
 instructions for device form fields and     date range inputs.   - Hide
 decorative icons/illustrations from assistive tech (alt="",    
 aria-hidden="true") in empty-message, side-button-menu, and profile-item.   -
 Add role="heading" aria-level="2" to modal dialog titles. - Target Size,
 Contrast, Text Spacing & Responsive Reflow (P2):   - Expand stepper indicator
 hit area to >= 24x24px, increase inactive border     contrast, and expose
 aria-current="step".   - Add tooltips for truncated report metadata values
 and replace fixed heights     and hidden overflow with min-height and
 responsive reflow rules.

---
 modules/ui/src/app/app.component.scss           |  2 +-
 .../device-item/device-item.component.scss      |  2 +-
 .../device-tests/device-tests.component.html    | 11 ++++++++---
 .../download-report-zip.component.spec.ts       |  7 ++++++-
 .../download-report-zip.component.ts            | 10 ++++++++++
 .../download-zip-modal.component.html           |  6 ++++--
 .../dynamic-form/dynamic-form.component.html    | 11 +++++++----
 .../empty-message/empty-message.component.html  |  2 +-
 .../components/help-tip/help-tip.component.ts   |  5 +++++
 .../list-item/list-item.component.html          |  5 +++--
 .../components/list-item/list-item.component.ts | 12 ++++++++++++
 .../list-layout/list-layout.component.html      |  9 ++++++---
 .../list-layout/list-layout.component.scss      | 13 ++++++++++---
 .../side-button-menu.component.html             |  3 ++-
 .../simple-dialog/simple-dialog.component.html  |  6 ++++--
 .../components/stepper/stepper.component.html   |  3 ++-
 .../components/stepper/stepper.component.scss   |  8 +++++++-
 .../consent-dialog.component.html               |  2 ++
 .../certificates-table.component.html           |  6 +++---
 .../device-qualification-from.component.html    |  9 +++++++--
 .../settings-dropdown.component.html            |  5 +++--
 .../general-settings.component.html             |  5 ++---
 .../delete-report/delete-report.component.html  |  2 +-
 .../delete-report.component.spec.ts             |  5 ++++-
 .../filter-dialog/filter-dialog.component.html  |  3 +++
 .../components/search/search.component.scss     |  8 +++++++-
 .../app/pages/reports/reports.component.html    | 17 +++++++++++++----
 .../profile-item/profile-item.component.html    |  4 +---
 .../download-options.component.html             |  2 ++
 .../download-options.component.spec.ts          |  8 ++++++++
 .../download-options.component.ts               |  2 +-
 .../test-result-dialog.component.html           |  4 +++-
 .../testrun-initiate-form.component.html        |  4 +++-
 .../testrun-status-card.component.html          |  4 ++--
 .../testrun-table/testrun-table.component.html  |  8 ++++++--
 .../components/timer/timer.component.html       |  7 ++-----
 modules/ui/src/styles.scss                      |  2 +-
 37 files changed, 163 insertions(+), 59 deletions(-)

diff --git a/modules/ui/src/app/app.component.scss b/modules/ui/src/app/app.component.scss
index 3af857820..98e3a8f07 100644
--- a/modules/ui/src/app/app.component.scss
+++ b/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 {
diff --git a/modules/ui/src/app/components/device-item/device-item.component.scss b/modules/ui/src/app/components/device-item/device-item.component.scss
index 7ea530c0b..27ea054cc 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.scss
+++ b/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);
diff --git a/modules/ui/src/app/components/device-tests/device-tests.component.html b/modules/ui/src/app/components/device-tests/device-tests.component.html
index 5818cc44d..fd9644ee4 100644
--- a/modules/ui/src/app/components/device-tests/device-tests.component.html
+++ b/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">
diff --git a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts
index 4965779de..b03d3d9f6 100644
--- a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts
+++ b/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'
+      );
     });
   });
 
diff --git a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts
index 5460b087e..48afc8af5 100644
--- a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts
+++ b/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 {
diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html
index 914b03916..9ca9ec2b8 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html
+++ b/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">
diff --git a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.html b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.html
index 708d8f42c..7791bfd0c 100644
--- a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.html
+++ b/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>
diff --git a/modules/ui/src/app/components/empty-message/empty-message.component.html b/modules/ui/src/app/components/empty-message/empty-message.component.html
index ad15f66f0..a479c970a 100644
--- a/modules/ui/src/app/components/empty-message/empty-message.component.html
+++ b/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>
diff --git a/modules/ui/src/app/components/help-tip/help-tip.component.ts b/modules/ui/src/app/components/help-tip/help-tip.component.ts
index c19680bf7..109787ce4 100644
--- a/modules/ui/src/app/components/help-tip/help-tip.component.ts
+++ b/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(
diff --git a/modules/ui/src/app/components/list-item/list-item.component.html b/modules/ui/src/app/components/list-item/list-item.component.html
index 91d79acb9..2fb07a65e 100644
--- a/modules/ui/src/app/components/list-item/list-item.component.html
+++ b/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>
diff --git a/modules/ui/src/app/components/list-item/list-item.component.ts b/modules/ui/src/app/components/list-item/list-item.component.ts
index 78169b17b..ff2d2ec69 100644
--- a/modules/ui/src/app/components/list-item/list-item.component.ts
+++ b/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(() => {
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.html b/modules/ui/src/app/components/list-layout/list-layout.component.html
index 8b6636347..a424d5704 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.html
+++ b/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>
       }
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.scss b/modules/ui/src/app/components/list-layout/list-layout.component.scss
index 8010d9efe..376094b19 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.scss
+++ b/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,7 +137,7 @@
   font-size: 16px;
   border-radius: 16px;
   width: fit-content;
-  height: 56px;
+  min-height: 56px;
   color: colors.$on-secondary-container;
   background-color: colors.$secondary-container;
 }
@@ -145,7 +145,7 @@
 .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;
+  }
+}
diff --git a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html b/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
index efdc68355..0cfe137c0 100644
--- a/modules/ui/src/app/components/side-button-menu/side-button-menu.component.html
+++ b/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"
diff --git a/modules/ui/src/app/components/simple-dialog/simple-dialog.component.html b/modules/ui/src/app/components/simple-dialog/simple-dialog.component.html
index c3f37888b..e14e999d2 100644
--- a/modules/ui/src/app/components/simple-dialog/simple-dialog.component.html
+++ b/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>
diff --git a/modules/ui/src/app/components/stepper/stepper.component.html b/modules/ui/src/app/components/stepper/stepper.component.html
index 6fda3e7f0..8a0bbb0b3 100644
--- a/modules/ui/src/app/components/stepper/stepper.component.html
+++ b/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>
       }
diff --git a/modules/ui/src/app/components/stepper/stepper.component.scss b/modules/ui/src/app/components/stepper/stepper.component.scss
index c8ed44e65..2a2d085b0 100644
--- a/modules/ui/src/app/components/stepper/stepper.component.scss
+++ b/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;
diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html
index d4673e0f5..107bd4e7e 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html
+++ b/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">
diff --git a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html b/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html
index 108e3a2dd..8e37c78af 100644
--- a/modules/ui/src/app/pages/certificates/components/certificates-table/certificates-table.component.html
+++ b/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"
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
index 9fe057a20..3d501ac22 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html
+++ b/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
diff --git a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
index ec725ea27..ad9cc8dec 100644
--- a/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
+++ b/modules/ui/src/app/pages/general-settings/components/settings-dropdown/settings-dropdown.component.html
@@ -5,14 +5,15 @@
     for="{{ key }}-group">
     {{ groupLabel }}
   </label>
-  <p class="setting-label-description">
+  <p class="setting-label-description" id="{{ key }}-description">
     {{ description }}
   </p>
 </div>
 
 <mat-form-field appearance="outline" class="setting-field">
   <mat-select
-    aria-labelledby="{{ key }}-group-label"
+    aria-labelledby="{{ key }}-label"
+    aria-describedby="{{ key }}-description"
     id="{{ key }}-group"
     ngDefaultControl
     class="setting-radio-group"
diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html
index a44ca3de6..e161d0b65 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html
@@ -155,13 +155,12 @@
           @if (data === 'analytics') {
             <p class="message">
               By installing and running Testrun, you understand and accept the
-              Terms of Service found
               <a
                 href="https://policies.google.com/technologies/partner-sites"
                 target="_blank"
                 class="message-link"
-                aria-label="here on Google Privacy & Terms page"
-                >here</a
+                aria-label="Google Privacy and Terms of Service"
+                >Google Terms of Service</a
               >
             </p>
           }
diff --git a/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.html b/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.html
index e24f64085..345065007 100644
--- a/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.html
+++ b/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.html
@@ -19,7 +19,7 @@
     href="#"
     role="button"
     matTooltip="Delete report for Testrun # {{ getTestRunId(data) }}"
-    [attr.aria-label]="'Delete report for Testrun # {{ getTestRunId(data) }}'"
+    [attr.aria-label]="'Delete report for Testrun # ' + getTestRunId(data)"
     (click)="deleteReport($event)"
     (keydown.enter)="deleteReport($event)"
     (keydown.space)="deleteReport($event)">
diff --git a/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.spec.ts b/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.spec.ts
index 46dae86c7..952b4c972 100644
--- a/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.spec.ts
+++ b/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.spec.ts
@@ -97,12 +97,15 @@ describe('DeleteReportComponent', () => {
         fixture.detectChanges();
       });
 
-      it('should have delete report button', () => {
+      it('should have delete report button with interpolated aria-label', () => {
         const deleteReportButton = compiled.querySelector(
           '.delete-report-button'
         );
 
         expect(deleteReportButton).toBeTruthy();
+        expect(deleteReportButton?.getAttribute('aria-label')).toBe(
+          'Delete report for Testrun # Delta 03-DIN-CPU 1.2.2 22 Jun 2023 9:20'
+        );
       });
     });
   });
diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html
index 070d34442..d8f0977d2 100644
--- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html
+++ b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html
@@ -135,6 +135,7 @@ <h2 class="filter-dialog-title" mat-dialog-title>{{ data.title }}</h2>
         <input
           [errorStateMatcher]="dateMatcher"
           matStartDate
+          aria-label="Start date"
           placeholder="mm/dd/yyyy"
           [(ngModel)]="range.start"
           #startDate="ngModel"
@@ -142,11 +143,13 @@ <h2 class="filter-dialog-title" mat-dialog-title>{{ data.title }}</h2>
         <input
           [errorStateMatcher]="dateMatcher"
           matEndDate
+          aria-label="End date"
           placeholder="mm/dd/yyyy"
           [(ngModel)]="range.end"
           #endDate="ngModel"
           (dateChange)="endDateChanged($event)" />
       </mat-date-range-input>
+      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
       @if (startDate.invalid || endDate.invalid) {
         <mat-error role="alert" aria-live="assertive">
           <span
diff --git a/modules/ui/src/app/pages/reports/components/search/search.component.scss b/modules/ui/src/app/pages/reports/components/search/search.component.scss
index 2d0378f37..10ccaaab9 100644
--- a/modules/ui/src/app/pages/reports/components/search/search.component.scss
+++ b/modules/ui/src/app/pages/reports/components/search/search.component.scss
@@ -24,13 +24,19 @@
   align-items: center;
   gap: 8px;
   border-radius: variables.$corner-small;
-  border: 1px solid mat.get-theme-color($light-theme, neutral-variant, 80);
+  border: 1px solid colors.$outline;
   background-color: colors.$white;
   min-height: 48px;
   padding: 4px 8px 4px 6px;
   box-sizing: border-box;
   width: 100%;
   cursor: text;
+
+  &.focused,
+  &:focus-within {
+    outline: 2px solid colors.$primary;
+    outline-offset: 1px;
+  }
 }
 
 .search-menu-trigger {
diff --git a/modules/ui/src/app/pages/reports/reports.component.html b/modules/ui/src/app/pages/reports/reports.component.html
index 550a59dc2..8ec232811 100644
--- a/modules/ui/src/app/pages/reports/reports.component.html
+++ b/modules/ui/src/app/pages/reports/reports.component.html
@@ -235,9 +235,12 @@ <h2 id="reports-heading" class="title" tabindex="-1">Reports</h2>
                     <dt class="meta-label">Location</dt>
                     <dd class="meta-value-container">
                       @if (getLocation(data)) {
-                        <span class="meta-value" [title]="getLocation(data)">{{
-                          getLocation(data)
-                        }}</span>
+                        <span
+                          class="meta-value"
+                          [matTooltip]="getLocation(data) || ''"
+                          [title]="getLocation(data)"
+                          >{{ getLocation(data) }}</span
+                        >
                       } @else {
                         <ng-container
                           *ngTemplateOutlet="emptyDetails"></ng-container>
@@ -250,6 +253,7 @@ <h2 id="reports-heading" class="title" tabindex="-1">Reports</h2>
                       @if (getLinuxEnv(data)) {
                         <span
                           class="meta-value highlight"
+                          [matTooltip]="getLinuxEnv(data) || ''"
                           [title]="getLinuxEnv(data)"
                           >{{ getLinuxEnv(data) }}</span
                         >
@@ -265,6 +269,7 @@ <h2 id="reports-heading" class="title" tabindex="-1">Reports</h2>
                       @if (getPythonVersion(data)) {
                         <span
                           class="meta-value font-mono"
+                          [matTooltip]="getPythonVersion(data) || ''"
                           [title]="getPythonVersion(data)"
                           >{{ getPythonVersion(data) }}</span
                         >
@@ -280,6 +285,7 @@ <h2 id="reports-heading" class="title" tabindex="-1">Reports</h2>
                       @if (getKernel(data)) {
                         <span
                           class="meta-value font-mono"
+                          [matTooltip]="getKernel(data) || ''"
                           [title]="getKernel(data)"
                           >{{ getKernel(data) }}</span
                         >
@@ -354,7 +360,10 @@ <h2 id="reports-heading" class="title" tabindex="-1">Reports</h2>
 </ng-template>
 
 <ng-template #emptyDetails>
-  <span class="meta-value meta-value-missing" title="{{ EMPTY_DETAIL_TEXT }}">
+  <span
+    class="meta-value meta-value-missing"
+    [matTooltip]="EMPTY_DETAIL_TEXT"
+    title="{{ EMPTY_DETAIL_TEXT }}">
     <mat-icon
       fontSet="material-symbols-outlined"
       class="missing-icon filled"
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
index 19337c1f6..94f10454e 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
+++ b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.html
@@ -28,9 +28,7 @@
     (click)="profileClicked.emit(profile)"
     (keydown.enter)="enterProfileItem(profile)"
     (keydown.space)="enterProfileItem(profile)">
-    <span
-      class="profile-item-icon-container"
-      [attr.aria-label]="profile.status">
+    <span class="profile-item-icon-container" aria-hidden="true">
       @if (profile.status === ProfileStatus.VALID) {
         <mat-icon class="profile-item-icon" fontSet="material-symbols-outlined">
           check_circle
diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
index b69b8ace4..cf94f8f8b 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
@@ -56,6 +56,8 @@
       class="download-button"
       [class.download-button-opened]="isOpenDownloadOptions"
       color="primary"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="isOpenDownloadOptions"
       [attr.aria-label]="
         isOpenDownloadOptions
           ? 'Hide download options'
diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts
index a9be3de24..293421d4a 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.spec.ts
@@ -83,6 +83,14 @@ describe('DownloadOptionsComponent', () => {
     expect(component.isOpenDownloadOptions).toBeFalse();
   });
 
+  it('#handleKeydown should close download options on Escape key', () => {
+    component.openDownloadOptions();
+    expect(component.isOpenDownloadOptions).toBeTrue();
+
+    component.handleKeydown(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(component.isOpenDownloadOptions).toBeFalse();
+  });
+
   describe('#sendGAEvent', () => {
     it('should send download_report_pdf when type is pdf', () => {
       component.sendGAEvent(MOCK_PROGRESS_DATA_CANCELLED);
diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
index eabbe1594..42ce92b93 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
@@ -133,7 +133,7 @@ export class DownloadOptionsComponent implements AfterViewInit {
     if (this.isOpenDownloadOptions) {
       this.keyManager.onKeydown(event);
 
-      if (event.key === 'Tab') {
+      if (event.key === 'Tab' || event.key === 'Escape') {
         this.isOpenDownloadOptions = false;
       }
     }
diff --git a/modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.html b/modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.html
index b2f635b43..89ab46b36 100644
--- a/modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.html
+++ b/modules/ui/src/app/pages/testrun/components/test-result-dialog/test-result-dialog.component.html
@@ -13,7 +13,9 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<span mat-dialog-title class="dialog-title">{{ data.testResult.name }}</span>
+<span mat-dialog-title role="heading" aria-level="2" class="dialog-title">{{
+  data.testResult.name
+}}</span>
 <mat-dialog-content class="content-container">
   <section class="result-info-main">
     <div>
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html
index e1adc396c..09491b381 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.html
@@ -14,7 +14,9 @@
 limitations under the License.
 -->
 <form [formGroup]="initiateForm" class="progress-initiate-form">
-  <span class="progress-initiate-form-title">Start new Testrun</span>
+  <span class="progress-initiate-form-title" role="heading" aria-level="2"
+    >Start new Testrun</span
+  >
 
   @if (devices$ | async; as devices) {
     <section class="progress-initiate-form-content">
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
index 331547fbf..31dd0ba83 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.html
@@ -18,8 +18,8 @@
     class="progress-card"
     [ngClass]="getClass(data.status, data.result)"
     [class.progress-card-pilot]="data.device.test_pack === TestingType.Pilot"
-    aria-live="assertive"
-    role="alert">
+    aria-live="polite"
+    role="status">
     <div class="progress-card-info progress-card-info-tests">
       <p class="progress-card-info-title">Tests executed</p>
       <p class="progress-card-info-text">
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
index 6b15ad6c8..950e265c6 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
@@ -65,10 +65,14 @@
       </mat-cell>
     </ng-container>
     <ng-container matColumnDef="clickableIcon">
-      <mat-header-cell mat-header-cell *matHeaderCellDef> </mat-header-cell>
+      <mat-header-cell mat-header-cell *matHeaderCellDef aria-label="Details">
+      </mat-header-cell>
       <mat-cell mat-cell *matCellDef="let element">
         @if (element.recommendations) {
-          <mat-icon class="clickable-icon" fontSet="material-symbols-outlined">
+          <mat-icon
+            class="clickable-icon"
+            fontSet="material-symbols-outlined"
+            aria-hidden="true">
             info
           </mat-icon>
         }
diff --git a/modules/ui/src/app/pages/testrun/components/timer/timer.component.html b/modules/ui/src/app/pages/testrun/components/timer/timer.component.html
index 62150cf8d..76f45bc3d 100644
--- a/modules/ui/src/app/pages/testrun/components/timer/timer.component.html
+++ b/modules/ui/src/app/pages/testrun/components/timer/timer.component.html
@@ -18,7 +18,7 @@
     id="monitoring-countdown-timer"
     class="monitoring-timer timer-widget"
     role="timer"
-    aria-live="polite"
+    aria-live="off"
     aria-atomic="true"
     [attr.aria-label]="timerAriaLabel">
     <div class="timer-circle-container">
@@ -52,10 +52,7 @@
         <span class="timer-label" aria-hidden="true">time remaining</span>
       </div>
     </div>
-    <span
-      class="cdk-visually-hidden sr-only"
-      aria-live="polite"
-      aria-atomic="true">
+    <span class="cdk-visually-hidden sr-only">
       {{ liveAnnouncementText }}
     </span>
   </div>
diff --git a/modules/ui/src/styles.scss b/modules/ui/src/styles.scss
index 81f299692..ca59f38cc 100644
--- a/modules/ui/src/styles.scss
+++ b/modules/ui/src/styles.scss
@@ -340,7 +340,7 @@ body:has(app-help-tip) .app-toolbar-button.app-toolbar-button-help-tips {
 
 .message-link {
   color: colors.$blue-700;
-  text-decoration: none;
+  text-decoration: underline;
   cursor: pointer;
   font-weight: 400;
 }