Skip to content

Commit 9021e7c

Browse files
willmartianwillmartian
authoredJul 9, 2021
fix(item): mirror disabled prop to aria attribute (#23544)
resolves #23513
·
v8.5.5v5.6.12
1 parent 39315bc commit 9021e7c

File tree

3 files changed

+119
-2
lines changed

3 files changed

+119
-2
lines changed
 

‎core/src/components/item/item.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
251251

252252
render() {
253253
const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection } = this;
254-
const childStyles = {};
254+
const childStyles = {} as any;
255255
const mode = getIonMode(this);
256256
const clickable = this.isClickable();
257257
const canActivate = this.canActivate();
@@ -273,10 +273,11 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
273273
this.itemStyles.forEach(value => {
274274
Object.assign(childStyles, value);
275275
});
276+
const ariaDisabled = (disabled || childStyles['item-interactive-disabled']) ? 'true' : null;
276277

277278
return (
278279
<Host
279-
aria-disabled={disabled ? 'true' : null}
280+
aria-disabled={ariaDisabled}
280281
class={{
281282
...childStyles,
282283
...labelColorStyles,

‎core/src/components/item/test/a11y/e2e.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
import { AxePuppeteer } from '@axe-core/puppeteer';
3+
4+
test('item: axe', async () => {
5+
const page = await newE2EPage({
6+
url: '/src/components/item/test/a11y?ionic:_testing=true'
7+
});
8+
9+
const results = await new AxePuppeteer(page).analyze();
10+
expect(results.violations.length).toEqual(0);
11+
});

‎core/src/components/item/test/a11y/index.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Item - a11y</title>
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
8+
<link href="../../../../../css/core.css" rel="stylesheet">
9+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
10+
<script src="../../../../../scripts/testing/scripts.js"></script>
11+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
12+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
13+
</head>
14+
15+
<body>
16+
<main>
17+
<h1>Item</h1>
18+
19+
<ion-item>
20+
<ion-label>Item with Input</ion-label>
21+
<ion-input placeholder="Placeholder"></ion-input>
22+
</ion-item>
23+
24+
<ion-item disabled>
25+
<ion-label>Item disabled with Input</ion-label>
26+
<ion-input placeholder="Placeholder"></ion-input>
27+
</ion-item>
28+
29+
<ion-item>
30+
<ion-label>Item with Input disabled</ion-label>
31+
<ion-input placeholder="Placeholder" disabled></ion-input>
32+
</ion-item>
33+
34+
<ion-item>
35+
<ion-label position="floating">Item with Select</ion-label>
36+
<ion-select>
37+
<ion-select-option value="">No Game Console</ion-select-option>
38+
<ion-select-option value="nes">NES</ion-select-option>
39+
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
40+
<ion-select-option value="ps">PlayStation</ion-select-option>
41+
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
42+
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
43+
<ion-select-option value="snes">SNES</ion-select-option>
44+
</ion-select>
45+
</ion-item>
46+
47+
<ion-item disabled>
48+
<ion-label position="floating">Item disabled with Select</ion-label>
49+
<ion-select>
50+
<ion-select-option value="">No Game Console</ion-select-option>
51+
<ion-select-option value="nes">NES</ion-select-option>
52+
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
53+
<ion-select-option value="ps">PlayStation</ion-select-option>
54+
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
55+
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
56+
<ion-select-option value="snes">SNES</ion-select-option>
57+
</ion-select>
58+
</ion-item>
59+
60+
<ion-item>
61+
<ion-label position="floating">Item with Select disabled</ion-label>
62+
<ion-select disabled>
63+
<ion-select-option value="">No Game Console</ion-select-option>
64+
<ion-select-option value="nes">NES</ion-select-option>
65+
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
66+
<ion-select-option value="ps">PlayStation</ion-select-option>
67+
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
68+
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
69+
<ion-select-option value="snes">SNES</ion-select-option>
70+
</ion-select>
71+
</ion-item>
72+
73+
<ion-item>
74+
<ion-label>Item with Toggle</ion-label>
75+
<ion-toggle slot="end"></ion-toggle>
76+
</ion-item>
77+
78+
<ion-item disabled>
79+
<ion-label>Item disabled with Toggle</ion-label>
80+
<ion-toggle slot="end"></ion-toggle>
81+
</ion-item>
82+
83+
<ion-item>
84+
<ion-label>Item with Toggle disabled</ion-label>
85+
<ion-toggle slot="end" disabled></ion-toggle>
86+
</ion-item>
87+
88+
<ion-item>
89+
<ion-label>Item with Radio</ion-label>
90+
<ion-radio slot="start" value="biff"></ion-radio>
91+
</ion-item>
92+
93+
<ion-item disabled>
94+
<ion-label>Item disabled with Radio</ion-label>
95+
<ion-radio slot="start" value="biff"></ion-radio>
96+
</ion-item>
97+
98+
<ion-item>
99+
<ion-label>Item with Radio disabled</ion-label>
100+
<ion-radio slot="start" value="biff" disabled></ion-radio>
101+
</ion-item>
102+
103+
</main>
104+
</body>
105+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.