From 6524d0ae35848d17ffd9865df7831fb0cd926c06 Mon Sep 17 00:00:00 2001
From: Volha Mardvilka <mardvilka@google.com>
Date: Tue, 21 May 2024 09:41:15 +0000
Subject: [PATCH] 341254121: (fix) [a11y] add item name for aria-labels delete
 and copy buttons

---
 .../certificate-item.component.html              |  2 +-
 .../certificate-item.component.spec.ts           |  4 ++++
 .../profile-item/profile-item.component.html     |  7 +++++--
 .../profile-item/profile-item.component.spec.ts  | 16 ++++++++++++++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html
index ee641becf..28bc1768a 100644
--- a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html
+++ b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.html
@@ -19,7 +19,7 @@
     [disabled]="certificate.uploading"
     class="certificate-item-delete"
     mat-icon-button
-    aria-label="Delete certificate"
+    attr.aria-label="Delete {{ certificate.name }} certificate"
     (click)="deleteButtonClicked.emit(certificate.name)">
     <mat-icon fontSet="material-symbols-outlined"> delete </mat-icon>
   </button>
diff --git a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.spec.ts b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.spec.ts
index 94a0a7a19..b0395e254 100644
--- a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.spec.ts
+++ b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.spec.ts
@@ -61,6 +61,10 @@ describe('CertificateItemComponent', () => {
           expect(deleteButton).toBeDefined();
         });
 
+        it('should have certificate name as part of aria-label', () => {
+          expect(deleteButton?.ariaLabel?.trim()).toContain(certificate.name);
+        });
+
         it('should emit delete event on delete button clicked', () => {
           const deleteSpy = spyOn(component.deleteButtonClicked, 'emit');
           deleteButton.click();
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 139396c88..8355e6ad6 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
@@ -18,13 +18,16 @@
     rule
   </mat-icon>
   <p class="profile-item-name">{{ profile.name }}</p>
-  <button class="profile-item-button" mat-icon-button aria-label="Copy profile">
+  <button
+    class="profile-item-button copy"
+    mat-icon-button
+    attr.aria-label="Copy {{ profile.name }}">
     <mat-icon fontSet="material-symbols-outlined"> content_copy </mat-icon>
   </button>
   <button
     class="profile-item-button delete"
     mat-icon-button
-    aria-label="Delete profile"
+    attr.aria-label="Delete {{ profile.name }}"
     (click)="deleteButtonClicked.emit(profile.name)">
     <mat-icon fontSet="material-symbols-outlined"> delete </mat-icon>
   </button>
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts
index 933ae06e9..418421da2 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts
+++ b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts
@@ -42,7 +42,19 @@ describe('ProfileItemComponent', () => {
   it('should have profile name', () => {
     const name = compiled.querySelector('.profile-item-name');
 
-    expect(name?.textContent?.trim()).toEqual('Profile name');
+    expect(name?.textContent?.trim()).toEqual(PROFILE_MOCK.name);
+  });
+
+  it('should have profile name as part of buttons aria-label', () => {
+    const deleteButton = fixture.nativeElement.querySelector(
+      '.profile-item-button.delete'
+    );
+    const copyButton = fixture.nativeElement.querySelector(
+      '.profile-item-button.copy'
+    );
+
+    expect(deleteButton?.ariaLabel?.trim()).toContain(PROFILE_MOCK.name);
+    expect(copyButton?.ariaLabel?.trim()).toContain(PROFILE_MOCK.name);
   });
 
   it('should emit delete event on delete button clicked', () => {
@@ -53,6 +65,6 @@ describe('ProfileItemComponent', () => {
 
     deleteButton.click();
 
-    expect(deleteSpy).toHaveBeenCalledWith('Profile name');
+    expect(deleteSpy).toHaveBeenCalledWith(PROFILE_MOCK.name);
   });
 });