From 62adeb84828b5cb778cd064da7f3413a5f60dcbf Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Mon, 22 Aug 2022 14:02:25 -0500 Subject: [PATCH] fix(alert): add default aria-label --- core/src/components/alert/alert.tsx | 2 + .../components/alert/test/a11y/alert.e2e.ts | 43 +++++++++++ .../src/components/alert/test/a11y/index.html | 75 +++++++++++++++++++ 3 files changed, 120 insertions(+) create mode 100644 core/src/components/alert/test/a11y/alert.e2e.ts create mode 100644 core/src/components/alert/test/a11y/index.html diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 89a13a3d3b6..af023a167de 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -584,12 +584,14 @@ export class Alert implements ComponentInterface, OverlayInterface { const subHdrId = `alert-${overlayIndex}-sub-hdr`; const msgId = `alert-${overlayIndex}-msg`; const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert'; + const defaultAriaLabel = header || subHeader || 'Alert'; return ( { + const button = page.locator(`#${buttonID}`); + await button.click(); + + const alert = page.locator('ion-alert'); + await expect(alert).toHaveAttribute('aria-label', expectedAriaLabel); +}; + +test.describe('alert: a11y', () => { + test.beforeEach(async ({ page, skip }) => { + skip.rtl(); + await page.goto(`/src/components/alert/test/a11y`); + }); + + test('should not have accessibility violations', async ({ page }) => { + const button = page.locator('#customHeader'); + await button.click(); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test('should have fallback aria-label when no header or subheader is specified', async ({ page }) => { + await testAriaLabel(page, 'noHeader', 'Alert'); + }); + + test('should inherit aria-label from header', async ({ page }) => { + await testAriaLabel(page, 'customHeader', 'Header'); + }); + + test('should inherit aria-label from subheader if no header is specified', async ({ page }) => { + await testAriaLabel(page, 'subHeaderOnly', 'Subtitle'); + }); + + test('should allow for manually specifying aria-label', async ({ page }) => { + await testAriaLabel(page, 'customAriaLabel', 'Custom alert'); + }); +}); diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html new file mode 100644 index 00000000000..a457eef9e2f --- /dev/null +++ b/core/src/components/alert/test/a11y/index.html @@ -0,0 +1,75 @@ + + + + + Alert - A11y + + + + + + + + + + +
+

Alert - A11y

+ + Alert With No Header + Alert With Custom Header + Alert With Subheader Only + Alert With Custom Aria Label +
+ + + +