diff --git a/apps/integration-e2e/src/e2e/toast.cy.ts b/apps/integration-e2e/src/e2e/toast.cy.ts index c7a60d26fb..bd5ec78400 100644 --- a/apps/integration-e2e/src/e2e/toast.cy.ts +++ b/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'); }); }); diff --git a/libs/components/toast/src/assets/locales/resources_en_US.json b/libs/components/toast/src/assets/locales/resources_en_US.json index 37aeab8400..f7fb5d824e 100644 --- a/libs/components/toast/src/assets/locales/resources_en_US.json +++ b/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" } } diff --git a/libs/components/toast/src/lib/modules/shared/sky-toast-resources.module.ts b/libs/components/toast/src/lib/modules/shared/sky-toast-resources.module.ts index 7d52c7b2d1..00f8a2b0a0 100644 --- a/libs/components/toast/src/lib/modules/shared/sky-toast-resources.module.ts +++ b/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); diff --git a/libs/components/toast/src/lib/modules/toast/toast.component.html b/libs/components/toast/src/lib/modules/toast/toast.component.html index b5f6d72f59..ef3647231d 100644 --- a/libs/components/toast/src/lib/modules/toast/toast.component.html +++ b/libs/components/toast/src/lib/modules/toast/toast.component.html @@ -17,16 +17,23 @@ [topIcon]="topIcon" > -
+
+ {{ 'skyux_toast_close_button_aria_label' | skyLibResources }} diff --git a/libs/components/toast/src/lib/modules/toast/toast.component.ts b/libs/components/toast/src/lib/modules/toast/toast.component.ts index 1879354064..12b32dc848 100644 --- a/libs/components/toast/src/lib/modules/toast/toast.component.ts +++ b/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 { /** diff --git a/libs/components/toast/testing/src/toast-fixture.ts b/libs/components/toast/testing/src/toast-fixture.ts index 59f2c9b934..f67f52eb22 100644 --- a/libs/components/toast/testing/src/toast-fixture.ts +++ b/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')); }