feat: auto associate tabpanels with tabs (#33939)

Author: marchbox

change/@fluentui-web-components-41bd9d29-ee1e-4b05-b599-add4a1718f07.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: auto associate tabpanels with tabs",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/tablist/tablist.spec.ts

@@ -310,4 +310,39 @@ test.describe('Tablist', () => {
 
     await expect(element).toHaveJSProperty('activeid', secondTabId);
   });
+
+  test('should associate panel elements with `aria-controls` attributes', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    await fastPage.setTemplate(`
+          <fluent-tablist>
+              <fluent-tab aria-controls="panel1">Tab one</fluent-tab>
+              <fluent-tab aria-controls="panel2">Tab two</fluent-tab>
+              <fluent-tab aria-controls="panel3">Tab three</fluent-tab>
+          </fluent-tablist>
+          <div id="panel1">Panel one</div>
+          <div id="panel2">Panel two</div>
+          <div id="panel3">Panel three</div>
+      `);
+
+    const tabs = element.getByRole('tab');
+    const firstTab = tabs.nth(0);
+    const secondTab = tabs.nth(1);
+    const firstPanel = page.getByText('Panel one');
+    const secondPanel = page.getByText('Panel two');
+    const thirdPanel = page.getByText('Panel three');
+
+    await expect(firstTab).toHaveAttribute('aria-selected', 'true');
+    await expect(firstPanel).toBeVisible();
+    await expect(firstPanel).toHaveRole('tabpanel');
+    await expect(secondPanel).toBeHidden();
+    await expect(secondPanel).toHaveRole('tabpanel');
+    await expect(thirdPanel).toBeHidden();
+    await expect(thirdPanel).toHaveRole('tabpanel');
+
+    await secondTab.click();
+
+    await expect(firstPanel).toBeHidden();
+    await expect(secondPanel).toBeVisible();
+    await expect(thirdPanel).toBeHidden();
+  });
 });

packages/web-components/src/tablist/tablist.stories.ts

@@ -148,3 +148,20 @@ export const LargeSizeVerticalOrientation: Story = {
     },
   ],
 };
+
+export const AutoPanelAssociation: Story = {
+  render: renderComponent(html<StoryArgs<FluentTablist>>`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <fluent-tablist>
+        <fluent-tab aria-controls="panel1">First Tab</fluent-tab>
+        <fluent-tab aria-controls="panel2">Second Tab</fluent-tab>
+        <fluent-tab aria-controls="panel3">Third Tab</fluent-tab>
+        <fluent-tab aria-controls="panel4">Fourth Tab</fluent-tab>
+      </fluent-tablist>
+      <div id="panel1">First panel</div>
+      <div id="panel2">Second panel</div>
+      <div id="panel3">Third panel</div>
+      <div id="panel4">Fourth panel</div>
+    </div>
+  `),
+};

packages/web-components/src/tablist/tablist.ts

@@ -85,6 +85,21 @@ export class BaseTablist extends FASTElement {
     if (this.$fastController.isConnected && this.tabs.length > 0) {
       this.prevActiveTabIndex = this.tabs.findIndex((item: HTMLElement) => item.id === oldValue);
       this.setTabs();
+
+      if (oldValue) {
+        const prevActiveTab = this.tabs[this.prevActiveTabIndex];
+        const prevActivePanel = this.tabPanelMap.get(prevActiveTab);
+        if (prevActivePanel) {
+          prevActivePanel.hidden = true;
+        }
+      }
+
+      if (newValue && this.activetab) {
+        const activePanel = this.tabPanelMap.get(this.activetab);
+        if (activePanel) {
+          activePanel.hidden = false;
+        }
+      }
     }
   }
 
@@ -100,6 +115,17 @@ export class BaseTablist extends FASTElement {
     if (this.$fastController.isConnected && this.tabs.length > 0) {
       this.tabIds = this.getTabIds();
       this.setTabs();
+
+      for (const tab of this.tabs) {
+        const ariaControls = tab.getAttribute('aria-controls') ?? '';
+        const rootNode = this.getRootNode() as Document | ShadowRoot;
+        const panel = rootNode.getElementById(ariaControls);
+        if (ariaControls && panel) {
+          panel.role ??= 'tabpanel';
+          panel.hidden = this.activeid !== tab.id;
+          this.tabPanelMap.set(tab, panel);
+        }
+      }
     }
   }
 
@@ -113,6 +139,8 @@ export class BaseTablist extends FASTElement {
   private activeTabIndex: number = 0;
   private tabIds!: Array<string>;
 
+  private tabPanelMap = new WeakMap<HTMLElement, HTMLElement>();
+
   private change = (): void => {
     this.$emit('change', this.activetab);
   };