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

fix(item): mirror disabled prop to aria attribute (#23544)

Browse Source 
resolves #23513
This commit is contained in:
William Martin
2021-07-09 09:19:48 -04:00
committed by GitHub
parent 39315bc857
commit 9021e7cc4b
3 changed files with 119 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,7 +251,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
render() {
const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection } = this;
const childStyles = {};
const childStyles = {} as any;
const mode = getIonMode(this);
const clickable = this.isClickable();
const canActivate = this.canActivate();
@ -273,10 +273,11 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
this.itemStyles.forEach(value => {
Object.assign(childStyles, value);
});
const ariaDisabled = (disabled || childStyles['item-interactive-disabled']) ? 'true' : null;
return (
<Host
aria-disabled={disabled ? 'true' : null}
aria-disabled={ariaDisabled}
class={{
...childStyles,
...labelColorStyles,

11
core/src/components/item/test/a11y/e2e.ts Normal file
View File

@ -0,0 +1,11 @@
import { newE2EPage } from '@stencil/core/testing';
import { AxePuppeteer } from '@axe-core/puppeteer';
test('item: axe', async () => {
const page = await newE2EPage({
url: '/src/components/item/test/a11y?ionic:_testing=true'
});
const results = await new AxePuppeteer(page).analyze();
expect(results.violations.length).toEqual(0);
});

105
core/src/components/item/test/a11y/index.html Normal file
View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item - a11y</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="../../../../../css/core.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>Item</h1>
<ion-item>
<ion-label>Item with Input</ion-label>
<ion-input placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item disabled>
<ion-label>Item disabled with Input</ion-label>
<ion-input placeholder="Placeholder"></ion-input>
</ion-item>
<ion-item>
<ion-label>Item with Input disabled</ion-label>
<ion-input placeholder="Placeholder" disabled></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Item with Select</ion-label>
<ion-select>
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item disabled>
<ion-label position="floating">Item disabled with Select</ion-label>
<ion-select>
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="floating">Item with Select disabled</ion-label>
<ion-select disabled>
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Item with Toggle</ion-label>
<ion-toggle slot="end"></ion-toggle>
</ion-item>
<ion-item disabled>
<ion-label>Item disabled with Toggle</ion-label>
<ion-toggle slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Item with Toggle disabled</ion-label>
<ion-toggle slot="end" disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Item with Radio</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item disabled>
<ion-label>Item disabled with Radio</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Item with Radio disabled</ion-label>
<ion-radio slot="start" value="biff" disabled></ion-radio>
</ion-item>
</main>
</body>
</html>