fix(accordion, accordion-item): improve a11y (#7560)

**Related Issue:** #5553 ## Summary Updated HTML to improve a11y.
Esri · Aug 31, 2023 · b5170b6 · b5170b6
1 parent fc2c720
commit b5170b6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts
@@ -1,5 +1,7 @@
+import { newE2EPage } from "@stencil/core/testing";
 import { accessible, renders, slots, hidden } from "../../tests/commonTests";
-import { SLOTS } from "./resources";
+import { CSS, IDS, SLOTS } from "./resources";
+import { html } from "../../../support/formatting";
 
 describe("calcite-accordion-item", () => {
   describe("renders", () => {
@@ -17,4 +19,28 @@ describe("calcite-accordion-item", () => {
   describe("slots", () => {
     slots("calcite-accordion-item", SLOTS);
   });
+
+  it("properly uses ARIA and roles", async () => {
+    // this test covers a11y relationships not reported by axe-core/accessible test helper
+
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-accordion-item></calcite-accordion-item>`);
+
+    const headerContent = await page.find(`calcite-accordion-item >>> .${CSS.headerContent}`);
+
+    expect(headerContent.getAttribute("aria-expanded")).toBe("false");
+    expect(headerContent.getAttribute("aria-controls")).toBe(IDS.section);
+    expect(headerContent.getAttribute("role")).toBe("button");
+
+    const content = await page.find(`calcite-accordion-item >>> .${CSS.content}`);
+
+    expect(content.getAttribute("aria-labelledby")).toBe(IDS.sectionToggle);
+    expect(await content.getProperty("id")).toBe(IDS.section);
+
+    const accordionItem = await page.find(`calcite-accordion-item`);
+    accordionItem.setProperty("expanded", true);
+    await page.waitForChanges();
+
+    expect(headerContent.getAttribute("aria-expanded")).toBe("true");
+  });
 });
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
@@ -21,7 +21,7 @@ import {
   toAriaBoolean,
 } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
-import { SLOTS, CSS } from "./resources";
+import { SLOTS, CSS, IDS } from "./resources";
 import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
 import { RequestedItem } from "./interfaces";
 
@@ -174,8 +174,10 @@ export class AccordionItem implements ConditionalSlotComponent {
           <div class={{ [CSS.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" }}>
             {this.renderActionsStart()}
             <div
+              aria-controls={IDS.section}
               aria-expanded={toAriaBoolean(this.expanded)}
               class={CSS.headerContent}
+              id={IDS.sectionToggle}
               onClick={this.itemHeaderClickHandler}
               role="button"
               tabindex="0"
@@ -204,9 +206,9 @@ export class AccordionItem implements ConditionalSlotComponent {
             </div>
             {this.renderActionsEnd()}
           </div>
-          <div class={CSS.content}>
+          <section aria-labelledby={IDS.sectionToggle} class={CSS.content} id={IDS.section}>
             <slot />
-          </div>
+          </section>
         </div>
       </Host>
     );

diff --git a/packages/calcite-components/src/components/accordion-item/resources.ts b/packages/calcite-components/src/components/accordion-item/resources.ts
@@ -18,3 +18,8 @@ export const CSS = {
   iconEnd: "icon--end",
   headerContainer: "header-container",
 };
+
+export const IDS = {
+  section: "section",
+  sectionToggle: "section-toggle",
+};