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

resolves #19939
ionic-team · May 23, 2022 · 311c634 · 311c634
1 parent a989364
commit 311c634
Show file tree

Hide file tree

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

diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx
@@ -46,6 +46,7 @@ export class List implements ComponentInterface {
     const { lines, inset } = this;
     return (
       <Host
+        role="list"
         class={{
           [mode]: true,
 

diff --git a/core/src/components/list/test/a11y/index.html b/core/src/components/list/test/a11y/index.html
@@ -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>
diff --git a/core/src/components/list/test/a11y/list.e2e.ts b/core/src/components/list/test/a11y/list.e2e.ts
@@ -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([]);
+  });
+});