From d3e1a09363a829bef95f872ce21e65171722a16c Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Fri, 6 Sep 2024 13:04:33 +0000
Subject: [PATCH 1/2] 365059335: (fix) [GAR 1.1] change device tile structure
 to allow read by Orca screen reader

---
 .../device-item/device-item.component.html    | 38 +++++++++++--------
 .../device-item/device-item.component.scss    | 22 ++++++++++-
 .../device-item/device-item.component.spec.ts |  8 ----
 .../testrun-initiate-form.component.spec.ts   |  6 ---
 4 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/modules/ui/src/app/components/device-item/device-item.component.html b/modules/ui/src/app/components/device-item/device-item.component.html
index b3c3e5591..d5a7548c7 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.html
+++ b/modules/ui/src/app/components/device-item/device-item.component.html
@@ -14,36 +14,42 @@
 limitations under the License.
 -->
 <button
-  *ngIf="deviceView === DeviceView.Basic"
+  *ngIf="deviceView === DeviceView.Basic && tabIndex === 0"
   [tabIndex]="tabIndex"
-  [attr.role]="tabIndex === 0 ? 'button' : 'presentation'"
   (click)="itemClick()"
   [attr.aria-label]="label"
-  [ngClass]="{ 'non-interective': tabIndex !== 0 }"
   class="device-item"
   type="button">
-  <div
-    class="item-manufacturer"
-    attr.aria-label="{{ device.test_pack }} {{ device.manufacturer }}">
+  <ng-container *ngTemplateOutlet="basicView"></ng-container>
+</button>
+
+<div
+  *ngIf="deviceView === DeviceView.Basic && tabIndex !== 0"
+  [attr.aria-label]="label"
+  class="device-item non-interactive">
+  <ng-container *ngTemplateOutlet="basicView"></ng-container>
+</div>
+
+<ng-template #basicView>
+  <p class="item-manufacturer">
+    <span class="visually-hidden">{{ device.test_pack }}</span>
     <app-program-type-icon
       *ngIf="device.test_pack === TestingType.Qualification"
       [type]="ProgramType.Qualification"
-      matTooltip="This device will be tested for Qualification."
-      aria-label="This device will be tested for Qualification."></app-program-type-icon>
+      matTooltip="This device will be tested for Qualification."></app-program-type-icon>
     <app-program-type-icon
       *ngIf="device.test_pack === TestingType.Pilot"
       [type]="ProgramType.Pilot"
-      matTooltip="This device will be tested for the Pilot program."
-      aria-label="This device will be tested for the Pilot program."></app-program-type-icon>
+      matTooltip="This device will be tested for the Pilot program."></app-program-type-icon>
     <span>{{ device.manufacturer }}</span>
-  </div>
-  <div [attr.aria-label]="device.model" class="item-name">
+  </p>
+  <p [attr.aria-label]="device.model" class="item-name">
     {{ device.model }}
-  </div>
-  <div [attr.aria-label]="device.mac_addr" class="item-mac-address">
+  </p>
+  <p [attr.aria-label]="device.mac_addr" class="item-mac-address">
     {{ device.mac_addr }}
-  </div>
-</button>
+  </p>
+</ng-template>
 
 <div
   *ngIf="deviceView === DeviceView.WithActions"
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 78507de0e..65f68a0a4 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
@@ -41,7 +41,7 @@ $border-radius: 12px;
     cursor: pointer;
   }
 
-  &.non-interective {
+  &.non-interactive {
     &:hover {
       cursor: default;
     }
@@ -118,6 +118,20 @@ $border-radius: 12px;
   border-color: mat.m2-get-color-from-palette($color-primary, 600);
 }
 
+.visually-hidden {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 .item-status {
   margin-right: 16px;
   grid-area: status;
@@ -232,11 +246,17 @@ $border-radius: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    margin: 0;
   }
 
   .item-name {
     width: 230px;
     box-sizing: border-box;
     text-align: start;
+    margin: 0;
+  }
+
+  .item-mac-address {
+    margin: 0;
   }
 }
diff --git a/modules/ui/src/app/components/device-item/device-item.component.spec.ts b/modules/ui/src/app/components/device-item/device-item.component.spec.ts
index df7204975..b92c7d3cf 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.spec.ts
+++ b/modules/ui/src/app/components/device-item/device-item.component.spec.ts
@@ -102,14 +102,6 @@ describe('DeviceItemComponent', () => {
 
       expect(clickSpy).toHaveBeenCalledWith(component.device);
     });
-
-    it('should have tabindex', () => {
-      component.tabIndex = -2;
-      fixture.detectChanges();
-      const item = compiled.querySelector('.device-item') as HTMLElement;
-
-      expect(item.tabIndex).toBe(-2);
-    });
   });
 
   describe('with device view as WithActions', () => {
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts
index 6fe08782b..f6f5adf7c 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts
@@ -304,12 +304,6 @@ describe('ProgressInitiateFormComponent', () => {
         expect(deviceItem).toBeTruthy();
       });
 
-      it('should have tabindex -1 for device item', () => {
-        const deviceItem = compiled.querySelector('app-device-item button');
-
-        expect((deviceItem as HTMLElement).tabIndex).toBe(-1);
-      });
-
       it('should display firmware if device selected', () => {
         const firmware = compiled.querySelector('input');
 

From d84ec0a4497db531893efd3c98aa7070d5751dc1 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Fri, 6 Sep 2024 13:13:21 +0000
Subject: [PATCH 2/2] 365059335: (fix) [GAR 1.1] change device tile - remove
 unnecessary aria label

---
 .../src/app/components/device-item/device-item.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/ui/src/app/components/device-item/device-item.component.html b/modules/ui/src/app/components/device-item/device-item.component.html
index d5a7548c7..f1586f9a0 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.html
+++ b/modules/ui/src/app/components/device-item/device-item.component.html
@@ -43,10 +43,10 @@
       matTooltip="This device will be tested for the Pilot program."></app-program-type-icon>
     <span>{{ device.manufacturer }}</span>
   </p>
-  <p [attr.aria-label]="device.model" class="item-name">
+  <p class="item-name">
     {{ device.model }}
   </p>
-  <p [attr.aria-label]="device.mac_addr" class="item-mac-address">
+  <p class="item-mac-address">
     {{ device.mac_addr }}
   </p>
 </ng-template>