From 3a96688c41b8d785a8725d9df6b62a0e55b06105 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Thu, 5 Sep 2024 13:03:26 +0000
Subject: [PATCH] 364828484: (fix) [GAR 1.1] change program icon aria-label

---
 .../device-item/device-item.component.html    | 22 +++++++++----------
 .../device-item/device-item.component.ts      |  5 ++++-
 2 files changed, 14 insertions(+), 13 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 bfed0a3d4..b3c3e5591 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
@@ -16,12 +16,15 @@
 <button
   *ngIf="deviceView === DeviceView.Basic"
   [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">
+  <div
+    class="item-manufacturer"
+    attr.aria-label="{{ device.test_pack }} {{ device.manufacturer }}">
     <app-program-type-icon
       *ngIf="device.test_pack === TestingType.Qualification"
       [type]="ProgramType.Qualification"
@@ -32,9 +35,7 @@
       [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>
-    <span [attr.aria-label]="device.manufacturer">{{
-      device.manufacturer
-    }}</span>
+    <span>{{ device.manufacturer }}</span>
   </div>
   <div [attr.aria-label]="device.model" class="item-name">
     {{ device.model }}
@@ -55,7 +56,7 @@
     attr.aria-label="Edit device {{ label }}"
     class="button-edit"
     type="button">
-    <div [attr.aria-label]="device.manufacturer" class="item-manufacturer">
+    <div class="item-manufacturer">
       <app-program-type-icon
         *ngIf="device.test_pack === TestingType.Qualification"
         [type]="ProgramType.Qualification"
@@ -73,16 +74,13 @@
         edit_square</mat-icon
       >
     </div>
-    <div
-      *ngIf="device.status === DeviceStatus.INVALID"
-      [attr.aria-label]="device.status"
-      class="item-status">
-      Outdated
+    <div *ngIf="device.status === DeviceStatus.INVALID" class="item-status">
+      {{ INVALID_DEVICE }}
     </div>
-    <div [attr.aria-label]="device.model" class="item-name">
+    <div class="item-name">
       {{ device.model }}
     </div>
-    <div [attr.aria-label]="device.mac_addr" class="item-mac-address">
+    <div class="item-mac-address">
       {{ device.mac_addr }}
     </div>
   </button>
diff --git a/modules/ui/src/app/components/device-item/device-item.component.ts b/modules/ui/src/app/components/device-item/device-item.component.ts
index 2a62a5f20..72690210f 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.ts
+++ b/modules/ui/src/app/components/device-item/device-item.component.ts
@@ -44,6 +44,7 @@ export class DeviceItemComponent {
   readonly DeviceStatus = DeviceStatus;
   readonly TestingType = TestingType;
   readonly ProgramType = ProgramType;
+  readonly INVALID_DEVICE = 'Outdated';
   @Input() device!: Device;
   @Input() tabIndex = 0;
   @Input() deviceView!: string;
@@ -60,6 +61,8 @@ export class DeviceItemComponent {
   }
 
   get label() {
-    return `${this.device.manufacturer} ${this.device.model} ${this.device.mac_addr}`;
+    const deviceStatus =
+      this.device.status === DeviceStatus.INVALID ? this.INVALID_DEVICE : '';
+    return `${this.device.test_pack} ${this.device.manufacturer} ${this.device.model} ${deviceStatus} ${this.device.mac_addr}`;
   }
 }