365059335: (fix) [GAR 1.1] change device tile structure to allow read by Orca screen reader

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 class="item-name">
     {{ device.model }}
-  </div>
-  <div [attr.aria-label]="device.mac_addr" class="item-mac-address">
+  </p>
+  <p class="item-mac-address">
     {{ device.mac_addr }}
-  </div>
-</button>
+  </p>
+</ng-template>
 
 <div
   *ngIf="deviceView === DeviceView.WithActions"

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;
   }
 }

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', () => {

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');