javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item, list): list aria roles are added (#25336)

Browse Source 
resolves #19939
This commit is contained in:
Liam DeBeasi
2022-05-23 15:50:28 -04:00
committed by GitHub
parent a9893640b7
commit 311c634d20
4 changed files with 41 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/item/item.tsx
View File

@ -389,6 +389,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
}); });
const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null; const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
const fillValue = fill || 'none'; const fillValue = fill || 'none';
const inList = hostContext('ion-list', this.el);
return ( return (
<Host <Host
aria-disabled={ariaDisabled} aria-disabled={ariaDisabled}
@ -402,13 +403,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
[`item-fill-${fillValue}`]: true, [`item-fill-${fillValue}`]: true,
[`item-shape-${shape}`]: shape !== undefined, [`item-shape-${shape}`]: shape !== undefined,
'item-disabled': disabled, 'item-disabled': disabled,
'in-list': hostContext('ion-list', this.el), 'in-list': inList,
'item-multiple-inputs': this.multipleInputs, 'item-multiple-inputs': this.multipleInputs,
'ion-activatable': canActivate, 'ion-activatable': canActivate,
'ion-focusable': this.focusable, 'ion-focusable': this.focusable,
'item-rtl': document.dir === 'rtl', 'item-rtl': document.dir === 'rtl',
}), }),
}} }}
role={inList ? 'listitem' : null}
> >
<TagType {...attrs} class="item-native" part="native" disabled={disabled} {...clickFn}> <TagType {...attrs} class="item-native" part="native" disabled={disabled} {...clickFn}>
<slot name="start"></slot> <slot name="start"></slot>

1
core/src/components/list/list.tsx
View File

@ -46,6 +46,7 @@ export class List implements ComponentInterface {
const { lines, inset } = this; const { lines, inset } = this;
return ( return (
<Host <Host
role="list"
class={{ class={{
[mode]: true, [mode]: true,

24
core/src/components/list/test/a11y/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>List - 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>List - a11y</h1>
<ion-list>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
</ion-list>
</main>
</body>
</html>

13
core/src/components/list/test/a11y/list.e2e.ts Normal file
View File

@ -0,0 +1,13 @@
import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('list: a11y', () => {
test('should not have accessibility violations', async ({ page }) => {
await page.goto(`/src/components/list/test/a11y`);
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});
});