hds-tooltip - Implement a11y toggle content pattern

.changeset/dry-frogs-smash.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`hds-tooltip` - Changed structure of tooltip content to add a wrapper that is always in the DOM and set `aria-controls` on trigger elements for a11y improvements with toggled content
+
+`TooltipButton` - Changed structure of tooltip content to add a wrapper that is always in the DOM and set `aria-controls` on button for a11y improvements with toggled content

packages/components/src/modifiers/hds-tooltip.ts

@@ -11,6 +11,7 @@ import type { ArgsFor } from 'ember-modifier';
 
 import { assert } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
+import { guidFor } from '@ember/object/internals';
 
 import tippy, { followCursor } from 'tippy.js';
 import type {
@@ -32,10 +33,13 @@ export interface HdsTooltipModifierSignature {
 }
 
 function cleanup(instance: HdsTooltipModifier): void {
-  const { _interval, _needsTabIndex, _tooltip } = instance;
+  const { _interval, _needsTabIndex, _tooltip, _containerElement } = instance;
   if (_needsTabIndex) {
     _tooltip?.reference?.removeAttribute('tabindex');
   }
+  if (_containerElement) {
+    _containerElement.remove();
+  }
   clearInterval(_interval);
   _tooltip?.destroy();
 }
@@ -55,9 +59,11 @@ function cleanup(instance: HdsTooltipModifier): void {
  */
 export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSignature> {
   private _didSetup = false;
+  private _containerId: string = 'container-' + guidFor(this);
   _interval: number | undefined = undefined;
   _needsTabIndex = false;
   _tooltip: TippyInstance | undefined = undefined;
+  _containerElement?: HTMLElement;
 
   constructor(owner: unknown, args: ArgsFor<HdsTooltipModifierSignature>) {
     super(owner, args);
@@ -105,6 +111,7 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
     positional: HdsTooltipModifierSignature['Args']['Positional'],
     named: HdsTooltipModifierSignature['Args']['Named']
   ): void {
+    this.#createPopoverContainer(element);
     const tooltipProps = this.#getTooltipProps(element, positional, named);
     this._tooltip = tippy(element, tooltipProps);
   }
@@ -118,6 +125,20 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
     this._tooltip?.setProps(tooltipProps);
   }
 
+  #createPopoverContainer(
+    element: HdsTooltipModifierSignature['Element']
+  ): void {
+    const containerElement = document.createElement('div');
+    containerElement.setAttribute('id', this._containerId);
+    containerElement.classList.add('hds-tooltip-container');
+    containerElement.style.setProperty('position', 'absolute');
+    containerElement.style.setProperty('width', '100%');
+    element.setAttribute('aria-controls', this._containerId);
+    element.setAttribute('aria-describedby', this._containerId);
+    element.after(containerElement);
+    this._containerElement = containerElement;
+  }
+
   #getTooltipProps(
     element: HdsTooltipModifierSignature['Element'],
     positional: HdsTooltipModifierSignature['Args']['Positional'],
@@ -200,9 +221,9 @@ export default class HdsTooltipModifier extends Modifier<HdsTooltipModifierSigna
         </svg>`,
       // keeps tooltip itself open on hover:
       interactive: true,
+      appendTo: this._containerElement,
       // fix accessibility features that get messed up with setting interactive: true
       aria: {
-        content: 'describedby',
         expanded: false,
       },
       content: () => content,

showcase/tests/integration/components/hds/tooltip/tooltip-button-test.js

@@ -81,20 +81,20 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
     assert.dom('.tippy-box').hasAttribute('role', 'tooltip');
   });
 
-  test('the button has an aria-describedby attribute with a value matching the tooltip id', async function (assert) {
+  test('the button has an aria-describedby and aria-controls attribute with a value matching the tooltip container', async function (assert) {
     await render(
       hbs`<Hds::TooltipButton @text="Hello" data-test-tooltip-button>info</Hds::TooltipButton>`
     );
     await focus('[data-test-tooltip-button]');
-    assert.dom('[data-test-tooltip-button]').hasAttribute('aria-describedby');
-    assert.dom('[data-tippy-root]').hasAttribute('id');
-
-    assert.strictEqual(
-      this.element
-        .querySelector('[data-test-tooltip-button]')
-        .getAttribute('aria-describedby'),
-      this.element.querySelector('[data-tippy-root]').getAttribute('id')
-    );
+    const tooltipContainerId = this.element
+      .querySelector('.hds-tooltip-container')
+      .getAttribute('id');
+    assert
+      .dom('[data-test-tooltip-button]')
+      .hasAttribute('aria-describedby', tooltipContainerId);
+    assert
+      .dom('[data-test-tooltip-button]')
+      .hasAttribute('aria-controls', tooltipContainerId);
   });
 
   // PLACEMENT

showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.js

@@ -22,12 +22,19 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
     // test the expected accessibility related attributes:
     assert.dom('#test-tooltip-modifier').hasAttribute('aria-describedby');
-    assert.dom('[data-tippy-root]').hasAttribute('id');
+    assert.dom('.hds-tooltip-container').exists();
+    assert.dom('.hds-tooltip-container').hasAttribute('id');
     assert.strictEqual(
       this.element
         .querySelector('#test-tooltip-modifier')
         .getAttribute('aria-describedby'),
-      this.element.querySelector('[data-tippy-root]').getAttribute('id')
+      this.element.querySelector('.hds-tooltip-container').getAttribute('id')
+    );
+    assert.strictEqual(
+      this.element
+        .querySelector('#test-tooltip-modifier')
+        .getAttribute('aria-controls'),
+      this.element.querySelector('.hds-tooltip-container').getAttribute('id')
     );
   });
 });