PopoverPrimitive - Implement aria-controls (#2639)

Author: dchyun

.changeset/many-apples-film.md

@@ -0,0 +1,8 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Breadcrumb` - Implemented `aria-controls` in `Breadcrumb::Truncation` for a11y improvements with toggled content from `PopoverPrimitive`
+`Dropdown` - Implemented `aria-controls` in `Dropdown::Toggle::Button` for a11y improvements with toggled content from `PopoverPrimitive`
+`PopoverPrimitve` - Implemented `aria-controls` in toggle element for a11y improvements with toggled content
+`RichTooltip` - Removed explicitly setting `aria-controls` in `RichTooltip::Toggle` as it is now set through the `PopoverPrimitive`

packages/components/src/components/hds/popover-primitive/index.ts

@@ -119,19 +119,23 @@ export default class HdsPopoverPrimitive extends Component<HdsPopoverPrimitiveSi
     ): void => {
       this._popoverElement = element;
 
-      // for the click events we don't use `onclick` event listeners, but we rely on the `popovertarget` attribute
-      // provided by the Popover API which does all the magic for us without needing JS code
-      // (important: to work it needs to be applied to a button)
-      if (this.enableClickEvents) {
+      // We need to create a popoverId in order to connect the popover and the toggle with aria-controls
+      // and an id is needed to implement `onclick` event listeners
+      if (this._toggleElement) {
         let popoverId;
         if (this._popoverElement.id) {
           popoverId = this._popoverElement.id;
         } else {
-          // we need a DOM id for the `popovertarget` attribute
+          // we need a DOM id for the `aria-controls` and `popovertarget` attributes
           popoverId = guidFor(this);
           this._popoverElement.id = popoverId;
         }
-        if (this._toggleElement) {
+        this._toggleElement.setAttribute('aria-controls', popoverId);
+
+        // for the click events we don't use `onclick` event listeners, but we rely on the `popovertarget` attribute
+        // provided by the Popover API which does all the magic for us without needing JS code
+        // (important: to work it needs to be applied to a button)
+        if (this.enableClickEvents) {
           this._toggleElement.setAttribute('popovertarget', popoverId);
         }
       }

packages/components/src/components/hds/rich-tooltip/toggle.hbs

@@ -7,7 +7,6 @@
   class={{this.classNames}}
   ...attributes
   type="button"
-  aria-controls={{@popoverId}}
   aria-describedby={{@popoverId}}
   aria-expanded={{if @isOpen "true" "false"}}
   {{@setupPrimitiveToggle}}

showcase/tests/integration/components/hds/popover-primitive/index-test.js

@@ -30,6 +30,7 @@ module(
       const popover = this.element.querySelector('main');
       const popoverId = popover.id;
       assert.dom('button').hasAttribute('popovertarget', popoverId);
+      assert.dom('button').hasAttribute('aria-controls', popoverId);
       assert.dom('main').hasAttribute('popover', 'auto');
     });
 

showcase/tests/integration/components/hds/rich-tooltip/toggle-test.js

@@ -111,7 +111,6 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
       hbs`<Hds::RichTooltip::Toggle @popoverId="popoverId" @isOpen={{true}} />`
     );
     assert.dom('.hds-rich-tooltip__toggle').hasAttribute('type', 'button');
-    assert.dom('.hds-rich-tooltip__toggle').hasAria('controls', 'popoverId');
     assert.dom('.hds-rich-tooltip__toggle').hasAria('describedby', 'popoverId');
     assert.dom('.hds-rich-tooltip__toggle').hasAria('expanded', 'true');
   });