fix(components/toast): toast close buttons have distinct aria labels (#…

…1951)

apps/integration-e2e/src/e2e/toast.cy.ts

@@ -10,6 +10,6 @@ describe('ToastComponent', () => {
     cy.get('sky-toaster sky-toast:first-child button.sky-toast-btn-close')
       .should('be.visible')
       .should('have.attr', 'title')
-      .should('not.equal', 'skyux_toast_close_button');
+      .should('not.equal', 'skyux_toast_close_button_title');
   });
 });

libs/components/toast/src/assets/locales/resources_en_US.json

@@ -1,6 +1,10 @@
 {
-  "skyux_toast_close_button": {
+  "skyux_toast_close_button_aria_label": {
     "_description": "Screen reader text for the close button on toasts",
+    "message": "Close message:"
+  },
+  "skyux_toast_close_button_title": {
+    "_description": "Tooltip text for the close button on toasts",
     "message": "Close the message"
   }
 }

libs/components/toast/src/lib/modules/shared/sky-toast-resources.module.ts

@@ -18,7 +18,10 @@ import {
 } from '@skyux/i18n';
 
 const RESOURCES: { [locale: string]: SkyLibResources } = {
-  'EN-US': { skyux_toast_close_button: { message: 'Close the message' } },
+  'EN-US': {
+    skyux_toast_close_button_aria_label: { message: 'Close message:' },
+    skyux_toast_close_button_title: { message: 'Close the message' },
+  },
 };
 
 SkyLibResourcesService.addResources(RESOURCES);

libs/components/toast/src/lib/modules/toast/toast.component.html

@@ -17,16 +17,23 @@
         [topIcon]="topIcon"
       ></sky-icon-stack>
     </div>
-    <div class="sky-toast-content">
+    <div class="sky-toast-content" skyId="toastContent" #toastContent>
       <ng-content />
     </div>
     <button
       class="sky-toast-btn-close"
       type="button"
-      [attr.title]="'skyux_toast_close_button' | skyLibResources"
+      [attr.title]="'skyux_toast_close_button_title' | skyLibResources"
+      [attr.aria-labelledby]="toastCloseMessage.id + ' ' + toastContent.id"
       (click)="close()"
     >
       <sky-icon icon="close" />
     </button>
   </div>
+  <span
+    class="sky-screen-reader-only"
+    skyId="toastCloseMessage"
+    #toastCloseMessage
+    >{{ 'skyux_toast_close_button_aria_label' | skyLibResources }}</span
+  >
 </aside>

libs/components/toast/src/lib/modules/toast/toast.component.ts

@@ -13,6 +13,7 @@ import {
   inject,
 } from '@angular/core';
 import { skyAnimationEmerge } from '@skyux/animations';
+import { SkyIdModule } from '@skyux/core';
 import { SkyIconModule, SkyIconStackItem } from '@skyux/indicators';
 
 import { Subject, combineLatest } from 'rxjs';
@@ -37,7 +38,7 @@ const SKY_TOAST_TYPE_DEFAULT = SkyToastType.Info;
   animations: [skyAnimationEmerge],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  imports: [CommonModule, SkyIconModule, SkyToastResourcesModule],
+  imports: [CommonModule, SkyIconModule, SkyIdModule, SkyToastResourcesModule],
 })
 export class SkyToastComponent implements OnInit, OnDestroy {
   /**

libs/components/toast/testing/src/toast-fixture.ts

@@ -12,7 +12,7 @@ export class SkyToastFixture {
    * The toast's current text.
    */
   public get text(): string | undefined {
-    return SkyAppTestUtility.getText(this.#debugEl);
+    return SkyAppTestUtility.getText(this.#getToastContentEl());
   }
 
   /**
@@ -59,6 +59,10 @@ export class SkyToastFixture {
     return this.#debugEl.query(By.css('.sky-toast'));
   }
 
+  #getToastContentEl(): DebugElement {
+    return this.#debugEl.query(By.css('.sky-toast-content'));
+  }
+
   #getCloseBtnEl(): DebugElement {
     return this.#debugEl.query(By.css('.sky-toast-btn-close'));
   }