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 +
+ + + +