From 9021e7cc4b48a69ccc94faa7d2ddcb10a2afa340 Mon Sep 17 00:00:00 2001 From: William Martin Date: Fri, 9 Jul 2021 09:19:48 -0400 Subject: [PATCH] fix(item): mirror disabled prop to aria attribute (#23544) resolves #23513 --- core/src/components/item/item.tsx | 5 +- core/src/components/item/test/a11y/e2e.ts | 11 ++ core/src/components/item/test/a11y/index.html | 105 ++++++++++++++++++ 3 files changed, 119 insertions(+), 2 deletions(-) create mode 100644 core/src/components/item/test/a11y/e2e.ts create mode 100644 core/src/components/item/test/a11y/index.html diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index b9fdaf94db..1ed8aa6bd3 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -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 ( { + 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); +}); diff --git a/core/src/components/item/test/a11y/index.html b/core/src/components/item/test/a11y/index.html new file mode 100644 index 0000000000..d59901d3cb --- /dev/null +++ b/core/src/components/item/test/a11y/index.html @@ -0,0 +1,105 @@ + + + + + Item - a11y + + + + + + + + + +
+

Item

+ + + Item with Input + + + + + Item disabled with Input + + + + + Item with Input disabled + + + + + Item with Select + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Item disabled with Select + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Item with Select disabled + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Item with Toggle + + + + + Item disabled with Toggle + + + + + Item with Toggle disabled + + + + + Item with Radio + + + + + Item disabled with Radio + + + + + Item with Radio disabled + + + +
+ +