diff --git a/.changeset/seven-eyes-whisper.md b/.changeset/seven-eyes-whisper.md new file mode 100644 index 00000000000..ece8c2850af --- /dev/null +++ b/.changeset/seven-eyes-whisper.md @@ -0,0 +1,7 @@ +--- +"@hashicorp/design-system-components": patch +--- + +`Accordion` - Set `aria-controls` of `Accordion::Item::Button` to `contentId` from `DisclosurePrimitve` for a11y improvements with toggled content +`DisclosurePrimitve` - Changed DOM structure of content section and exposed `contentId` for a11y improvements with toggled content +`Reveal` - Set `aria-controls` of `Reveal::Toggle` to `contentId` from `DisclosurePrimitve` for a11y improvements with toggled content diff --git a/packages/components/src/components/hds/accordion/item/index.hbs b/packages/components/src/components/hds/accordion/item/index.hbs index 046b1a92fd9..6deaac27611 100644 --- a/packages/components/src/components/hds/accordion/item/index.hbs +++ b/packages/components/src/components/hds/accordion/item/index.hbs @@ -14,7 +14,7 @@ <:content as |c|> - + {{yield (hash close=c.close) to="content"}} diff --git a/packages/components/src/components/hds/accordion/item/index.ts b/packages/components/src/components/hds/accordion/item/index.ts index c5562edba96..b93eeb29bd9 100644 --- a/packages/components/src/components/hds/accordion/item/index.ts +++ b/packages/components/src/components/hds/accordion/item/index.ts @@ -57,12 +57,6 @@ export interface HdsAccordionItemSignature { } export default class HdsAccordionItem extends Component { - /** - * Generates a unique ID for the Content - * - * @param _contentId - */ - private _contentId = 'content-' + guidFor(this); private _titleId = 'title-' + guidFor(this); get ariaLabelledBy(): string | undefined { diff --git a/packages/components/src/components/hds/disclosure-primitive/index.hbs b/packages/components/src/components/hds/disclosure-primitive/index.hbs index 2761166073b..0867c02a868 100644 --- a/packages/components/src/components/hds/disclosure-primitive/index.hbs +++ b/packages/components/src/components/hds/disclosure-primitive/index.hbs @@ -4,11 +4,11 @@ }}
- {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}} + {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen contentId=this._contentId) to="toggle"}}
- {{#if this.isOpen}} -
+
+ {{#if this.isOpen}} {{yield (hash close=this.close) to="content"}} -
- {{/if}} + {{/if}} +
\ No newline at end of file diff --git a/packages/components/src/components/hds/disclosure-primitive/index.ts b/packages/components/src/components/hds/disclosure-primitive/index.ts index 13a368c52bc..d475d664d12 100644 --- a/packages/components/src/components/hds/disclosure-primitive/index.ts +++ b/packages/components/src/components/hds/disclosure-primitive/index.ts @@ -7,6 +7,7 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { schedule } from '@ember/runloop'; +import { guidFor } from '@ember/object/internals'; export interface HdsDisclosurePrimitiveSignature { Args: { @@ -19,6 +20,7 @@ export interface HdsDisclosurePrimitiveSignature { Blocks: { toggle: [ { + contentId: string; isOpen: boolean; // eslint-disable-next-line @typescript-eslint/no-explicit-any onClickToggle: (...args: any[]) => void; @@ -37,6 +39,7 @@ export interface HdsDisclosurePrimitiveSignature { export default class HdsDisclosurePrimitive extends Component { @tracked private _isOpen = false; @tracked private _isControlled = this.args.isOpen !== undefined; + private _contentId = 'content-' + guidFor(this); get isOpen(): boolean { if (this._isControlled) { diff --git a/packages/components/src/components/hds/reveal/index.hbs b/packages/components/src/components/hds/reveal/index.hbs index 968888f213d..c16f9ca2b84 100644 --- a/packages/components/src/components/hds/reveal/index.hbs +++ b/packages/components/src/components/hds/reveal/index.hbs @@ -6,7 +6,7 @@ <:toggle as |t|> <:content> -
+
{{yield}}
diff --git a/packages/components/src/components/hds/reveal/index.ts b/packages/components/src/components/hds/reveal/index.ts index 853f6de8f0b..d4267f73fa3 100644 --- a/packages/components/src/components/hds/reveal/index.ts +++ b/packages/components/src/components/hds/reveal/index.ts @@ -4,7 +4,6 @@ */ import Component from '@glimmer/component'; -import { guidFor } from '@ember/object/internals'; import { assert } from '@ember/debug'; import type { HdsDisclosurePrimitiveSignature } from '../disclosure-primitive'; @@ -23,13 +22,6 @@ export interface HdsRevealSignature { } export default class HdsReveal extends Component { - /** - * Generates a unique ID for the Content - * - * @param _contentId - */ - private _contentId = 'content-' + guidFor(this); - /** * @param getText * @type {string} diff --git a/showcase/tests/integration/components/hds/accordion/index-test.js b/showcase/tests/integration/components/hds/accordion/index-test.js index 7faed071efa..b408dcb5e6f 100644 --- a/showcase/tests/integration/components/hds/accordion/index-test.js +++ b/showcase/tests/integration/components/hds/accordion/index-test.js @@ -188,7 +188,7 @@ module('Integration | Component | hds/accordion/index', function (hooks) { .hasAttribute('aria-expanded', 'true'); }); - test('the AccordionItem toggle button has an aria-controls attribute with a value matching the content id', async function (assert) { + test('the AccordionItem toggle button has an aria-controls attribute with a value matching the DisclosurePrimitive content id', async function (assert) { await render( hbs` @@ -201,14 +201,13 @@ module('Integration | Component | hds/accordion/index', function (hooks) { ); await click('.hds-accordion-item__button'); assert.dom('.hds-accordion-item__button').hasAttribute('aria-controls'); - assert.dom('.hds-accordion-item__content').hasAttribute('id'); assert.strictEqual( this.element .querySelector('.hds-accordion-item__button') .getAttribute('aria-controls'), this.element - .querySelector('.hds-accordion-item__content') + .querySelector('.hds-disclosure-primitive__content') .getAttribute('id') ); }); diff --git a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.js b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.js index 40f53aac4bc..d170d49a9ee 100644 --- a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.js +++ b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.js @@ -34,11 +34,15 @@ module( <:toggle>