Tabs - Implement aria-controls (#2637)

Author: dchyun

.changeset/short-rockets-press.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Tabs` - Implement `aria-controls` in tab for a11y improvements with toggled content

packages/components/src/components/hds/tabs/index.hbs

@@ -21,6 +21,7 @@
             didUpdateNode=this.didUpdateTab
             willDestroyNode=this.willDestroyTab
             tabIds=this._tabIds
+            panelIds=this._panelIds
             selectedTabIndex=this.selectedTabIndex
             onClick=this.onClick
             onKeyUp=this.onKeyUp

packages/components/src/components/hds/tabs/tab.hbs

@@ -9,6 +9,7 @@
     role="tab"
     type="button"
     id={{this._tabId}}
+    aria-controls={{this.coupledPanelId}}
     aria-selected={{if this.isSelected "true" "false"}}
     tabindex={{unless this.isSelected "-1"}}
     {{did-insert this.didInsertNode @isSelected}}

packages/components/src/components/hds/tabs/tab.ts

@@ -7,11 +7,12 @@ import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
 import type { IconName } from '@hashicorp/flight-icons/svg';
-import type { HdsTabsTabIds } from './types';
+import type { HdsTabsTabIds, HdsTabsPanelIds } from './types';
 
 export interface HdsTabsTabSignature {
   Args: {
     tabIds?: HdsTabsTabIds;
+    panelIds?: HdsTabsPanelIds;
     selectedTabIndex?: number;
     icon?: IconName;
     count?: string;
@@ -52,6 +53,16 @@ export default class HdsTabsTab extends Component<HdsTabsTabSignature> {
     );
   }
 
+  /**
+   * Get the ID of the panel coupled/associated with the tab (it's used by the `aria-controls` attribute)
+   * @returns string}
+   */
+  get coupledPanelId(): string | undefined {
+    return this.nodeIndex !== undefined
+      ? this.args.panelIds?.[this.nodeIndex]
+      : undefined;
+  }
+
   @action
   didInsertNode(element: HTMLButtonElement, positional: [boolean?]): void {
     const { didInsertNode } = this.args;

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

@@ -315,6 +315,10 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
     assert
       .dom('[data-test="tab-1"] .hds-tabs__tab-button')
       .hasAttribute('role', 'tab');
+    const panelId = find('[data-test="panel-1"]').getAttribute('id');
+    assert
+      .dom('[data-test="tab-1"] .hds-tabs__tab-button')
+      .hasAttribute('aria-controls', panelId);
     assert.dom('[data-test="panel-1"]').hasAttribute('role', 'tabpanel');
     const tabId = find(
       '[data-test="tab-1"] .hds-tabs__tab-button'