341254121: (fix) [a11y] add item name for aria-labels delete and copy buttons

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>

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

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>

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