From f8a2c7948894e82b1bc41fa45e1716bc733b087c Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 23 Jan 2023 10:37:00 -0500 Subject: [PATCH] fix(breadcrumb): add aria-label to collapsed indicator (#26615) --- core/src/components/breadcrumb/breadcrumb.tsx | 3 +- .../components/breadcrumb/test/aria.spec.ts | 23 ++++++++++++ .../breadcrumbs/test/a11y/breadcrumbs.e2e.ts | 12 ++++++ .../breadcrumbs/test/a11y/index.html | 37 +++++++++++++++++++ 4 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 core/src/components/breadcrumb/test/aria.spec.ts create mode 100644 core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts create mode 100644 core/src/components/breadcrumbs/test/a11y/index.html diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx index c344f6fb68..a0500a721a 100644 --- a/core/src/components/breadcrumb/breadcrumb.tsx +++ b/core/src/components/breadcrumb/breadcrumb.tsx @@ -212,13 +212,14 @@ export class Breadcrumb implements ComponentInterface { {showCollapsedIndicator && ( )} {showSeparator && ( diff --git a/core/src/components/breadcrumb/test/aria.spec.ts b/core/src/components/breadcrumb/test/aria.spec.ts new file mode 100644 index 0000000000..d40957b838 --- /dev/null +++ b/core/src/components/breadcrumb/test/aria.spec.ts @@ -0,0 +1,23 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { Breadcrumb } from '../breadcrumb'; + +describe('breadcrumb: collapsed indicator', () => { + it('should have an aria-label', async () => { + const page = await newSpecPage({ + components: [Breadcrumb], + /** + * `showCollapsedIndicator` is an internal API used by `ion-breadcrumbs`. + * This test makes use of it to render the collapsed indicator. + */ + html: `Text`, + }); + + const collapsedIndicator = page.body + .querySelector('ion-breadcrumb')! + .shadowRoot!.querySelector('.breadcrumbs-collapsed-indicator')!; + const ariaLabel = collapsedIndicator.getAttribute('aria-label'); + + expect(ariaLabel).toEqual('Show more breadcrumbs'); + }); +}); diff --git a/core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts new file mode 100644 index 0000000000..adc70f5b03 --- /dev/null +++ b/core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts @@ -0,0 +1,12 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('breadcrumbs: axe', () => { + test('should not have accessibility violations', async ({ page }) => { + await page.goto(`/src/components/breadcrumbs/test/a11y`); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); +}); diff --git a/core/src/components/breadcrumbs/test/a11y/index.html b/core/src/components/breadcrumbs/test/a11y/index.html new file mode 100644 index 0000000000..a4123a8a51 --- /dev/null +++ b/core/src/components/breadcrumbs/test/a11y/index.html @@ -0,0 +1,37 @@ + + + + + Breadcrumbs - A11y + + + + + + + + + +
+

Breadcrumbs - a11y

+ + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ +