Merge pull request #2383 from hashicorp/hds-3809/unique-accordion-item-label

`Accordion`: make toggle button names unique

Author: shleewhite

.changeset/khaki-bats-admire.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Accordion`: changed the default name of the `Accordion` item toggles. Now, they are labelled by the content in the `Accordion` title.

packages/components/src/components/hds/accordion/item/button.hbs

@@ -10,6 +10,7 @@
   aria-controls={{@contentId}}
   aria-expanded={{if @isOpen "true" "false"}}
   aria-label={{@ariaLabel}}
+  aria-labelledby={{@ariaLabelledBy}}
   ...attributes
 >
   <Hds::Icon @name="chevron-down" @size={{if (eq @size "large") "24" "16"}} />

packages/components/src/components/hds/accordion/item/button.ts

@@ -11,12 +11,14 @@ import type { HdsAccordionSizes } from '../types.ts';
 interface HdsAccordionItemButtonSignature {
   Args: {
     ariaLabel?: string;
+    ariaLabelledBy?: string;
     contentId?: string;
     isOpen?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onClickToggle?: (event: MouseEvent, ...args: any[]) => void;
     parentContainsInteractive?: boolean;
     size?: HdsAccordionSizes;
+    id?: string;
   };
   Element: HTMLButtonElement;
 }

packages/components/src/components/hds/accordion/item/index.hbs

@@ -15,7 +15,8 @@
         @isOpen={{t.isOpen}}
         @onClickToggle={{t.onClickToggle}}
         @contentId={{this.contentId}}
-        @ariaLabel={{this.ariaLabel}}
+        @ariaLabel={{@ariaLabel}}
+        @ariaLabelledBy={{this.ariaLabelledBy}}
         @size={{this.size}}
         @parentContainsInteractive={{this.containsInteractive}}
       />
@@ -25,6 +26,7 @@
         @size={{this.toggleTextSize}}
         @weight="semibold"
         @color="strong"
+        id={{this.titleId}}
         class="hds-accordion-item__toggle-content"
       >
         {{yield to="toggle"}}

packages/components/src/components/hds/accordion/item/index.ts

@@ -63,14 +63,13 @@ export default class HdsAccordionItem extends Component<HdsAccordionItemSignatur
    * @param contentId
    */
   contentId = 'content-' + guidFor(this);
+  titleId = 'title-' + guidFor(this);
 
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Toggle display'
-   */
-  get ariaLabel(): string {
-    return this.args.ariaLabel ?? 'Toggle display';
+  get ariaLabelledBy(): string | undefined {
+    if (!this.args.ariaLabel) {
+      return this.titleId;
+    }
+    return undefined;
   }
 
   /**

showcase/tests/integration/components/hds/accordion/index-test.js

@@ -213,6 +213,55 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     );
   });
 
+  test('the AccordionItem toggle has an aria-labelledby attribute set to the id of the toggle text by default', async function (assert) {
+    await render(
+      hbs`
+        <Hds::Accordion as |A|>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Additional content</:content>
+          </A.Item>
+        </Hds::Accordion>
+      `
+    );
+
+    assert.dom('.hds-accordion-item__button').hasAttribute('aria-labelledby');
+
+    assert
+      .dom('.hds-accordion-item__button')
+      .doesNotHaveAttribute('aria-label');
+
+    assert.strictEqual(
+      this.element
+        .querySelector('.hds-accordion-item__toggle-content')
+        .getAttribute('id'),
+      this.element
+        .querySelector('.hds-accordion-item__button')
+        .getAttribute('aria-labelledby')
+    );
+  });
+
+  test('the AccordionItem toggle has an aria-label attribute when the argument is passed', async function (assert) {
+    await render(
+      hbs`
+        <Hds::Accordion as |A|>
+          <A.Item @ariaLabel="Custom toggle label">
+            <:toggle>Item one</:toggle>
+            <:content>Additional content</:content>
+          </A.Item>
+        </Hds::Accordion>
+      `
+    );
+
+    assert
+      .dom('.hds-accordion-item__button')
+      .hasAttribute('aria-label', 'Custom toggle label');
+
+    assert
+      .dom('.hds-accordion-item__button')
+      .doesNotHaveAttribute('aria-labelledby');
+  });
+
   // OPTIONS
 
   // isOpen