refactor(elements|ino-tab-bar): accessible ino-tab-bar

packages/elements-angular/src/generated/components.ts

@@ -1159,14 +1159,14 @@ export declare interface InoSwitch extends Components.InoSwitch {
 
 
 @ProxyCmp({
-  inputs: ['icon', 'indicatorContentWidth', 'label', 'stacked']
+  inputs: ['a11yControls', 'a11ySelected', 'icon', 'indicatorContentWidth', 'label', 'stacked']
 })
 @Component({
   selector: 'ino-tab',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['icon', 'indicatorContentWidth', 'label', 'stacked'],
+  inputs: ['a11yControls', 'a11ySelected', 'icon', 'indicatorContentWidth', 'label', 'stacked'],
 })
 export class InoTab {
   protected el: HTMLElement;

packages/elements-vue/src/proxies.ts

@@ -496,6 +496,8 @@ export const InoSwitch = /*@__PURE__*/ defineContainer<JSX.InoSwitch, JSX.InoSwi
 export const InoTab = /*@__PURE__*/ defineContainer<JSX.InoTab>('ino-tab', undefined, [
   'icon',
   'label',
+  'a11yControls',
+  'a11ySelected',
   'stacked',
   'indicatorContentWidth',
   'interacted'

packages/elements/src/components.d.ts

@@ -1241,6 +1241,14 @@ export namespace Components {
         "name"?: string;
     }
     interface InoTab {
+        /**
+          * Contains the ID of the associated tab panel for accessibility purposes. This property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.
+         */
+        "a11yControls"?: string;
+        /**
+          * Reflects the selected state of the tab for accessibility purposes. This property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role.
+         */
+        "a11ySelected"?: boolean;
         /**
           * Indicates a leading icon in the tab.
          */
@@ -3261,6 +3269,14 @@ declare namespace LocalJSX {
         "onCheckedChange"?: (event: InoSwitchCustomEvent<any>) => void;
     }
     interface InoTab {
+        /**
+          * Contains the ID of the associated tab panel for accessibility purposes. This property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.
+         */
+        "a11yControls"?: string;
+        /**
+          * Reflects the selected state of the tab for accessibility purposes. This property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role.
+         */
+        "a11ySelected"?: boolean;
         /**
           * Indicates a leading icon in the tab.
          */

packages/elements/src/components/ino-tab-bar/ino-tab-bar.tsx

@@ -30,13 +30,6 @@ export class TabBar implements ComponentInterface {
    */
   @Prop() activeTab?: number = 0;
 
-  @Watch('activeTab')
-  activeTabChangedWatcher(newTabIndex: number) {
-    if (this.mdcInstance) {
-      this.mdcInstance.activateTab(newTabIndex);
-    }
-  }
-
   /**
    * Autofocus of tab on activation.
    */
@@ -48,10 +41,27 @@ export class TabBar implements ComponentInterface {
    */
   @Event() activeTabChange!: EventEmitter;
 
+  @Watch('activeTab')
+  activeTabChangedWatcher(newTabIndex: number) {
+    if (this.mdcInstance) {
+      this.mdcInstance.activateTab(newTabIndex);
+      this.updateActiveTabState(newTabIndex);
+    }
+  }
+
+  private updateActiveTabState(activeTabIndex: number) {
+    const tabs: NodeListOf<HTMLInoTabElement> =
+      this.el.querySelectorAll('ino-tab');
+    tabs.forEach((tab, index) => {
+      tab.a11ySelected = index === activeTabIndex;
+    });
+  }
+
   componentDidLoad() {
     this.mdcInstance = new MDCTabBar(this.el.querySelector('.mdc-tab-bar'));
     this.mdcInstance.focusOnActivate = this.autoFocus;
     this.mdcInstance.activateTab(this.activeTab);
+    this.updateActiveTabState(this.activeTab);
   }
 
   disconnectedCallback() {
@@ -66,12 +76,13 @@ export class TabBar implements ComponentInterface {
     );
     const indexOfActivatedTab = allTabs.indexOf(e.detail as HTMLInoTabElement);
     this.activeTabChange.emit(indexOfActivatedTab);
+    this.updateActiveTabState(indexOfActivatedTab);
   }
 
   render() {
     return (
       <Host>
-        <div class="mdc-tab-bar" role="tablist">
+        <div class="mdc-tab-bar" role="tablist" aria-orientation="horizontal">
           <div class="mdc-tab-scroller">
             <div class="mdc-tab-scroller__scroll-area">
               <div class="mdc-tab-scroller__scroll-content">

packages/elements/src/components/ino-tab/ino-tab.tsx

@@ -8,6 +8,7 @@ import {
   Prop,
   h,
   Listen,
+  Watch,
 } from '@stencil/core';
 import classNames from 'classnames';
 
@@ -31,6 +32,18 @@ export class Tab implements ComponentInterface {
    */
   @Prop() label?: string;
 
+  /**
+   * Contains the ID of the associated tab panel for accessibility purposes.
+   * This property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.
+   */
+  @Prop({ reflect: true }) a11yControls?: string;
+
+  /**
+   * Reflects the selected state of the tab for accessibility purposes.
+   * This property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role.
+   */
+  @Prop({ reflect: true }) a11ySelected?: boolean;
+
   /**
    * Indicates that the tab icon and label should flow vertically instead of horizontally.
    */
@@ -47,6 +60,22 @@ export class Tab implements ComponentInterface {
    */
   @Event() interacted!: EventEmitter;
 
+  @Watch('a11ySelected')
+  a11ySelectedChanged(newValue: boolean) {
+    const buttonElement = this.el.querySelector('button');
+    if (buttonElement) {
+      buttonElement.setAttribute('aria-selected', String(newValue));
+    }
+  }
+
+  @Watch('a11yControls')
+  a11yControlsChanged(newValue: string) {
+    const buttonElement = this.el.querySelector('button');
+    if (buttonElement) {
+      buttonElement.setAttribute('aria-controls', newValue);
+    }
+  }
+
   @Listen('MDCTab:interacted')
   interactionHandler(e) {
     e.stopPropagation();

packages/elements/src/components/ino-tab/readme.md

@@ -74,12 +74,14 @@ class MyComponent extends Component {
 
 ## Properties
 
-| Property                | Attribute                 | Description                                                                                                                                    | Type      | Default     |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| `icon`                  | `icon`                    | Indicates a leading icon in the tab.                                                                                                           | `string`  | `undefined` |
-| `indicatorContentWidth` | `indicator-content-width` | Indicates that the tab only expands to the width of its content.                                                                               | `boolean` | `false`     |
-| `label`                 | `label`                   | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>[DEPRECATED] Please use the default slot instead. Indicates a label text in the tab. | `string`  | `undefined` |
-| `stacked`               | `stacked`                 | Indicates that the tab icon and label should flow vertically instead of horizontally.                                                          | `boolean` | `false`     |
+| Property                | Attribute                 | Description                                                                                                                                                                                                | Type      | Default     |
+| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `a11yControls`          | `a-1-1y-controls`         | Contains the ID of the associated tab panel for accessibility purposes. This property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.     | `string`  | `undefined` |
+| `a11ySelected`          | `a-1-1y-selected`         | Reflects the selected state of the tab for accessibility purposes. This property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role. | `boolean` | `undefined` |
+| `icon`                  | `icon`                    | Indicates a leading icon in the tab.                                                                                                                                                                       | `string`  | `undefined` |
+| `indicatorContentWidth` | `indicator-content-width` | Indicates that the tab only expands to the width of its content.                                                                                                                                           | `boolean` | `false`     |
+| `label`                 | `label`                   | <span style="color:red">**[DEPRECATED]**</span> <br/><br/>[DEPRECATED] Please use the default slot instead. Indicates a label text in the tab.                                                             | `string`  | `undefined` |
+| `stacked`               | `stacked`                 | Indicates that the tab icon and label should flow vertically instead of horizontally.                                                                                                                      | `boolean` | `false`     |
 
 
 ## Events

packages/storybook/elements-stencil-docs.json

@@ -9548,6 +9548,48 @@
         ]
       },
       "props": [
+        {
+          "name": "a11yControls",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "a-1-1y-controls",
+          "reflectToAttr": true,
+          "docs": "Contains the ID of the associated tab panel for accessibility purposes.\nThis property is optional and used to link the tab to its content panel, adhering to WAI-ARIA practices for the tabpanel role.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "a11ySelected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "a-1-1y-selected",
+          "reflectToAttr": true,
+          "docs": "Reflects the selected state of the tab for accessibility purposes.\nThis property is optional and primarily managed by the parent `ino-tab-bar` component, adhering to WAI-ARIA practices for the tab role.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "icon",
           "type": "string",

packages/storybook/src/stories/ino-tab-bar/ino-tab-bar.stories.ts

@@ -49,10 +49,22 @@ const template = new TemplateGenerator<Components.InoTabBar>(
       active-tab="${args.activeTab}"
       auto-focus="${args.autoFocus}"
     >
-      <ino-tab label="User" icon="user"></ino-tab>
-      <ino-tab label="Messages" icon="message"></ino-tab>
-      <ino-tab label="Settings" icon="settings"></ino-tab>
-      <ino-tab label="Download" icon="download"></ino-tab>
+      <ino-tab label="User" icon="user" a11y-controls="user-panel"></ino-tab>
+      <ino-tab
+        label="Messages"
+        icon="message"
+        a11y-controls="messages-panel"
+      ></ino-tab>
+      <ino-tab
+        label="Settings"
+        icon="settings"
+        a11y-controls="settings-panel"
+      ></ino-tab>
+      <ino-tab
+        label="Download"
+        icon="download"
+        a11y-controls="download-panel"
+      ></ino-tab>
     </ino-tab-bar>
   `,
 );

packages/storybook/src/stories/ino-tab/ino-tab.stories.ts

@@ -12,6 +12,7 @@ export default {
     indicatorContentWidth: false,
     stacked: false,
     icon: 'info',
+    a11yControls: 'panel-id',
   },
 } as Meta<Components.InoTab>;
 
@@ -22,6 +23,7 @@ const template = new TemplateGenerator<Components.InoTab>(
       icon="${args.icon}"
       indicator-content-width="${args.indicatorContentWidth}"
       stacked="${args.stacked}"
+      a11y-controls="${args.a11yControls}"
     >
       Label
     </ino-tab>