javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58: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

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>