javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(breadcrumb): add aria-label to collapsed indicator (#26615)

Browse Source
This commit is contained in:
Sean Perkins
2023-01-23 10:37:00 -05:00
committed by GitHub
parent e612253fc6
commit f8a2c79488
4 changed files with 74 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/breadcrumb/breadcrumb.tsx
View File

@ -212,13 +212,14 @@ export class Breadcrumb implements ComponentInterface {
{showCollapsedIndicator && ( {showCollapsedIndicator && (
<button <button
part="collapsed-indicator" part="collapsed-indicator"
aria-label="Show more breadcrumbs"
onClick={() => this.collapsedIndicatorClick()} onClick={() => this.collapsedIndicatorClick()}
ref={(collapsedEl) => (this.collapsedRef = collapsedEl)} ref={(collapsedEl) => (this.collapsedRef = collapsedEl)}
class={{ class={{
'breadcrumbs-collapsed-indicator': true, 'breadcrumbs-collapsed-indicator': true,
}} }}
> >
<ion-icon icon={ellipsisHorizontal} lazy={false}></ion-icon> <ion-icon aria-hidden="true" icon={ellipsisHorizontal} lazy={false}></ion-icon>
</button> </button>
)} )}
{showSeparator && ( {showSeparator && (

23
core/src/components/breadcrumb/test/aria.spec.ts Normal file
View File

@ -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: `<ion-breadcrumb show-collapsed-indicator="true">Text</ion-breadcrumb>`,
});
const collapsedIndicator = page.body
.querySelector('ion-breadcrumb')!
.shadowRoot!.querySelector('.breadcrumbs-collapsed-indicator')!;
const ariaLabel = collapsedIndicator.getAttribute('aria-label');
expect(ariaLabel).toEqual('Show more breadcrumbs');
});
});

12
core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts Normal file
View File

@ -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([]);
});
});

37
core/src/components/breadcrumbs/test/a11y/index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Breadcrumbs - A11y</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<main>
<h1>Breadcrumbs - a11y</h1>
<ion-breadcrumbs>
<ion-breadcrumb> Home </ion-breadcrumb>
<ion-breadcrumb> Electronics </ion-breadcrumb>
<ion-breadcrumb> Photography </ion-breadcrumb>
<ion-breadcrumb> Cameras </ion-breadcrumb>
<ion-breadcrumb> Film </ion-breadcrumb>
<ion-breadcrumb> 35 mm </ion-breadcrumb>
</ion-breadcrumbs>
<ion-breadcrumbs max-items="4">
<ion-breadcrumb> Home </ion-breadcrumb>
<ion-breadcrumb> Electronics </ion-breadcrumb>
<ion-breadcrumb> Photography </ion-breadcrumb>
<ion-breadcrumb> Cameras </ion-breadcrumb>
<ion-breadcrumb> Film </ion-breadcrumb>
<ion-breadcrumb> 35 mm </ion-breadcrumb>
</ion-breadcrumbs>
</main>
</body>
</html>