refactor(aria/tabs): associate tab to panel via id

Author: adolgachev

goldens/aria/tabs/index.api.md

@@ -22,11 +22,11 @@ export class Tab implements HasElement, OnInit, OnDestroy {
     ngOnInit(): void;
     open(): void;
     readonly panel: _angular_core.Signal<TabPanel | undefined>;
+    readonly panelRef: _angular_core.InputSignal<string | TabPanel>;
     readonly _pattern: TabPattern;
     readonly selected: _angular_core.Signal<boolean>;
-    readonly value: _angular_core.InputSignal<string>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tab, "[ngTab]", ["ngTab"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tab, "[ngTab]", ["ngTab"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "panelRef": { "alias": "panel"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, never>;
 }
@@ -45,13 +45,13 @@ export class TabList implements OnInit, OnDestroy {
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     // (undocumented)
-    findTab(value?: string): Tab | undefined;
+    findTab(panelId?: string): Tab | undefined;
     readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
-    open(value: string): boolean;
+    open(panelId: string): boolean;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TabListPattern;
     // (undocumented)
@@ -81,10 +81,9 @@ export class TabPanel implements OnInit, OnDestroy {
     ngOnInit(): void;
     readonly _pattern: TabPanelPattern;
     readonly _tabPattern: WritableSignal<TabPattern | undefined>;
-    readonly value: _angular_core.InputSignal<string>;
     readonly visible: _angular_core.Signal<boolean>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanel, never>;
 }
@@ -94,7 +93,7 @@ export class Tabs {
     constructor();
     readonly element: HTMLElement;
     // (undocumented)
-    findTabPanel(value?: string): TabPanel | undefined;
+    findTabPanel(id?: string): TabPanel | undefined;
     // (undocumented)
     _registerList(list: TabList): void;
     // (undocumented)

src/aria/tabs/tab-list.ts

@@ -135,7 +135,7 @@ export class TabList implements OnInit, OnDestroy {
       const pattern = this._selectedTabPattern();
       const tab = this._sortedTabs().find(tab => tab._pattern == pattern);
 
-      this.selectedTab.set(tab?.value());
+      this.selectedTab.set(tab?.panel()?.id());
     });
 
     afterRenderEffect(() => {
@@ -161,12 +161,12 @@ export class TabList implements OnInit, OnDestroy {
     this._tabs.set(new Set(this._tabs()));
   }
 
-  /** Opens the tab panel with the specified value. */
-  open(value: string): boolean {
-    return this._pattern.open(this.findTab(value)?._pattern);
+  /** Opens the tab panel with the specified id. */
+  open(panelId: string): boolean {
+    return this._pattern.open(this.findTab(panelId)?._pattern);
   }
 
-  findTab(value?: string) {
-    return value ? this._sortedTabs().find(tab => tab.value() === value) : undefined;
+  findTab(panelId?: string) {
+    return panelId ? this._sortedTabs().find(tab => tab.panel()?.id() === panelId) : undefined;
   }
 }

src/aria/tabs/tab-panel.ts

@@ -77,9 +77,6 @@ export class TabPanel implements OnInit, OnDestroy {
   /** The Tab UIPattern associated with the tabpanel */
   readonly _tabPattern: WritableSignal<TabPattern | undefined> = signal(undefined);
 
-  /** A local unique identifier for the tabpanel. */
-  readonly value = input<string>();
-
   /** Whether the tab panel is visible. */
   readonly visible = computed(() => !this._pattern.hidden());
 

src/aria/tabs/tab.ts

@@ -66,18 +66,19 @@ export class Tab implements HasElement, OnInit, OnDestroy {
   /** A unique identifier for the widget. */
   readonly id = input(inject(_IdGenerator).getId('ng-tab-', true));
 
-  /** Direct reference to panel associated with this tab.  */
-  readonly panelRef = input<TabPanel>(undefined, {alias: 'panel'});
+  /** Direct reference to or id of panel associated with this tab.  */
+  readonly panelRef = input.required<TabPanel | string>({alias: 'panel'});
 
   /** The panel associated with this tab. */
-  readonly panel = computed(() => this.panelRef() ?? this._tabsWrapper.findTabPanel(this.value()));
+  readonly panel = computed(() => {
+    const ref = this.panelRef();
+
+    return ref instanceof TabPanel ? ref : this._tabsWrapper.findTabPanel(ref);
+  });
 
   /** Whether a tab is disabled. */
   readonly disabled = input(false, {transform: booleanAttribute});
 
-  /** The remote tabpanel unique identifier. */
-  readonly value = input<string>();
-
   /** Whether the tab is active. */
   readonly active = computed(() => this._pattern.active());
 

src/aria/tabs/tabs.spec.ts

@@ -722,12 +722,12 @@ describe('Tabs', () => {
           [focusMode]="focusMode()"
           [selectionMode]="selectionMode()">
         @for (tabDef of tabsData(); track tabDef.value) {
-          <li ngTab [value]="tabDef.value" [disabled]="!!tabDef.disabled">{{ tabDef.label }}</li>
+          <li ngTab [panel]="tabDef.value" [disabled]="!!tabDef.disabled">{{ tabDef.label }}</li>
         }
       </ul>
 
       @for (tabDef of tabsData(); track tabDef.value) {
-        <div ngTabPanel [value]="tabDef.value">
+        <div ngTabPanel [id]="tabDef.value">
           <ng-template ngTabContent>{{ tabDef.content }}</ng-template>
       </div>
       }

src/aria/tabs/tabs.ts

@@ -95,7 +95,7 @@ export class Tabs {
     this._tabPanels.set(new Set(this._tabPanels()));
   }
 
-  findTabPanel(value?: string) {
-    return value ? this._tabPanelsList().find(panel => panel.value() === value) : undefined;
+  findTabPanel(id?: string) {
+    return id ? this._tabPanelsList().find(panel => panel.id() === id) : undefined;
   }
 }

src/components-examples/aria/tabs/rtl/tabs-rtl-example.ts

@@ -1,5 +1,4 @@
 import {afterRenderEffect, Component, viewChildren} from '@angular/core';
-import {Dir} from '@angular/cdk/bidi';
 import {Tabs, Tab, TabList, TabPanel, TabContent} from '@angular/aria/tabs';
 
 /** * @title RTL */

src/components-examples/aria/tabs/scrollable/tabs-scrollable-example.html

@@ -1,12 +1,12 @@
 <div ngTabs>
   <div ngTabList aria-label="Scrollable tabs" selectedTab="tab1">
     @for (i of tabsList; track i) {
-      <div ngTab [value]="'tab' + i">Tab {{i}}</div>
+      <div ngTab [panel]="'tab' + i">Tab {{i}}</div>
     }
   </div>
 
   @for (i of tabsList; track i) {
-    <div ngTabPanel [value]="'tab' + i">
+    <div ngTabPanel [id]="'tab' + i">
       <ng-template ngTabContent>Content for Tab {{i}}</ng-template>
     </div>
   }

src/components-examples/aria/tabs/tabs-configurable/tabs-configurable-example.html

@@ -49,12 +49,12 @@
     selectionMode="explicit"
   >
     @for (tabDef of tabsData; track tabDef.value) {
-      <div ngTab [value]="tabDef.value">{{ tabDef.label }}</div>
+      <div ngTab [panel]="tabDef.value">{{ tabDef.label }}</div>
     }    
   </div>
 
   @for (tabDef of tabsData; track tabDef.value) {
-    <div ngTabPanel [value]="tabDef.value">
+    <div ngTabPanel [id]="tabDef.value">
       <ng-template ngTabContent>{{ tabDef.label }}</ng-template>
     </div>
   }