refactor(aria/tabs): simplify code by using template references instead of user id to link tabs and panels

Author: adolgachev

goldens/aria/private/index.api.md

@@ -664,14 +664,14 @@ export function signal<T>(initialValue: T): WritableSignalLike<T>;
 export type SignalLike<T> = () => T;
 
 // @public
-export interface TabInputs extends Omit<ListNavigationItem, 'index'>, Omit<ExpansionItem, 'expandable'> {
-    tablist: SignalLike<TabListPattern>;
-    tabpanel: SignalLike<TabPanelPattern | undefined>;
-    value: SignalLike<string>;
+export interface TabInputs extends Omit<ListNavigationItem, 'index'>, Omit<ExpansionItem, 'expandable' | 'expanded'> {
+    tabList: SignalLike<TabListPattern>;
+    tabPanel: SignalLike<TabPanelPattern | undefined>;
 }
 
 // @public
 export interface TabListInputs extends Omit<ListNavigationInputs<TabPattern>, 'multi'>, Omit<ListExpansionInputs, 'multiExpandable' | 'items'> {
+    selectedTab: WritableSignalLike<TabPattern | undefined>;
     selectionMode: SignalLike<'follow' | 'explicit'>;
 }
 
@@ -691,7 +691,6 @@ export class TabListPattern {
     readonly nextKey: SignalLike<"ArrowRight" | "ArrowLeft" | "ArrowDown">;
     onKeydown(event: KeyboardEvent): void;
     onPointerdown(event: PointerEvent): void;
-    open(value: string): boolean;
     open(tab?: TabPattern): boolean;
     readonly orientation: SignalLike<'vertical' | 'horizontal'>;
     readonly pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
@@ -704,8 +703,7 @@ export class TabListPattern {
 // @public
 export interface TabPanelInputs extends LabelControlOptionalInputs {
     id: SignalLike<string>;
-    tab: SignalLike<TabPattern | undefined>;
-    value: SignalLike<string>;
+    readonly tab: SignalLike<TabPattern | undefined>;
 }
 
 // @public
@@ -718,7 +716,6 @@ export class TabPanelPattern {
     readonly labelledBy: SignalLike<string | undefined>;
     readonly labelManager: LabelControl;
     readonly tabIndex: SignalLike<-1 | 0>;
-    readonly value: SignalLike<string>;
 }
 
 // @public
@@ -729,15 +726,14 @@ export class TabPattern {
     readonly disabled: SignalLike<boolean>;
     readonly element: SignalLike<HTMLElement>;
     readonly expandable: SignalLike<boolean>;
+    // (undocumented)
     readonly expanded: WritableSignalLike<boolean>;
     readonly id: SignalLike<string>;
-    readonly index: SignalLike<number>;
     // (undocumented)
     readonly inputs: TabInputs;
     open(): boolean;
     readonly selected: SignalLike<boolean>;
     readonly tabIndex: SignalLike<0 | -1>;
-    readonly value: SignalLike<string>;
 }
 
 // @public

goldens/aria/tabs/index.api.md

@@ -4,27 +4,26 @@
 
 ```ts
 
+import { AfterViewInit } from '@angular/core';
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
 import { OnDestroy } from '@angular/core';
-import { OnInit } from '@angular/core';
+import { WritableSignal } from '@angular/core';
 
 // @public
-export class Tab implements HasElement, OnInit, OnDestroy {
+export class Tab implements AfterViewInit {
     readonly active: _angular_core.Signal<boolean>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly id: _angular_core.InputSignal<string>;
     // (undocumented)
-    ngOnDestroy(): void;
-    // (undocumented)
-    ngOnInit(): void;
+    ngAfterViewInit(): void;
     open(): void;
+    readonly panel: _angular_core.InputSignal<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; }; "panel": { "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>;
 }
@@ -38,69 +37,42 @@ export class TabContent {
 }
 
 // @public
-export class TabList implements OnInit, OnDestroy {
+export class TabList implements AfterViewInit {
     constructor();
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
     // (undocumented)
-    ngOnDestroy(): void;
-    // (undocumented)
-    ngOnInit(): void;
-    // (undocumented)
-    _onFocus(): void;
-    open(value: string): boolean;
+    ngAfterViewInit(): void;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TabListPattern;
-    // (undocumented)
-    _register(child: Tab): void;
-    readonly selectedTab: _angular_core.ModelSignal<string | undefined>;
+    readonly selectedTabIndex: _angular_core.ModelSignal<number>;
     readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
     readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly _tabPatterns: _angular_core.Signal<TabPattern[]>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
-    // (undocumented)
-    _unregister(child: Tab): void;
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabList, "[ngTabList]", ["ngTabList"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedTab": { "alias": "selectedTab"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selectedTab": "selectedTabChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabList, "[ngTabList]", ["ngTabList"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; "isSignal": true; }; }, { "selectedTabIndex": "selectedTabIndexChange"; }, ["_tabs"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabList, never>;
 }
 
 // @public
-export class TabPanel implements OnInit, OnDestroy {
+export class TabPanel {
     constructor();
     readonly element: HTMLElement;
     readonly id: _angular_core.InputSignal<string>;
-    // (undocumented)
-    ngOnDestroy(): void;
-    // (undocumented)
-    ngOnInit(): void;
     readonly _pattern: TabPanelPattern;
-    readonly value: _angular_core.InputSignal<string>;
+    // (undocumented)
+    readonly _tabPattern: WritableSignal<TabPattern | undefined>;
     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>;
 }
 
-// @public
-export class Tabs {
-    readonly element: HTMLElement;
-    // (undocumented)
-    _register(child: TabList | TabPanel): void;
-    readonly _tabPatterns: _angular_core.Signal<TabPattern[] | undefined>;
-    readonly _unorderedTabpanelPatterns: _angular_core.Signal<TabPanelPattern[]>;
-    // (undocumented)
-    _unregister(child: TabList | TabPanel): void;
-    // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tabs, "[ngTabs]", ["ngTabs"], {}, {}, never, never, true, never>;
-    // (undocumented)
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
-}
-
 // (No @packageDocumentation comment for this package)
 
 ```

src/aria/private/tabs/tabs.spec.ts

@@ -65,37 +65,32 @@ describe('Tabs Pattern', () => {
       softDisabled: signal(true),
       items: signal([]),
       element: signal(document.createElement('div')),
+      selectedTab: signal(undefined),
     };
     tabListPattern = new TabListPattern(tabListInputs);
 
     // Initiate a list of TabPatterns.
     tabInputs = [
       {
-        tablist: signal(tabListPattern),
-        tabpanel: signal(undefined),
+        tabList: signal(tabListPattern),
+        tabPanel: signal(undefined),
         id: signal('tab-1-id'),
         element: signal(createTabElement()),
         disabled: signal(false),
-        value: signal('tab-1'),
-        expanded: signal(false),
       },
       {
-        tablist: signal(tabListPattern),
-        tabpanel: signal(undefined),
+        tabList: signal(tabListPattern),
+        tabPanel: signal(undefined),
         id: signal('tab-2-id'),
         element: signal(createTabElement()),
         disabled: signal(false),
-        value: signal('tab-2'),
-        expanded: signal(false),
       },
       {
-        tablist: signal(tabListPattern),
-        tabpanel: signal(undefined),
+        tabList: signal(tabListPattern),
+        tabPanel: signal(undefined),
         id: signal('tab-3-id'),
         element: signal(createTabElement()),
         disabled: signal(false),
-        value: signal('tab-3'),
-        expanded: signal(false),
       },
     ];
     tabPatterns = [
@@ -109,17 +104,14 @@ describe('Tabs Pattern', () => {
       {
         id: signal('tabpanel-1-id'),
         tab: signal(undefined),
-        value: signal('tab-1'),
       },
       {
         id: signal('tabpanel-2-id'),
         tab: signal(undefined),
-        value: signal('tab-2'),
       },
       {
         id: signal('tabpanel-3-id'),
         tab: signal(undefined),
-        value: signal('tab-3'),
       },
     ];
     tabPanelPatterns = [
@@ -129,9 +121,9 @@ describe('Tabs Pattern', () => {
     ];
 
     // Binding between tabs and tabpanels.
-    tabInputs[0].tabpanel.set(tabPanelPatterns[0]);
-    tabInputs[1].tabpanel.set(tabPanelPatterns[1]);
-    tabInputs[2].tabpanel.set(tabPanelPatterns[2]);
+    tabInputs[0].tabPanel.set(tabPanelPatterns[0]);
+    tabInputs[1].tabPanel.set(tabPanelPatterns[1]);
+    tabInputs[2].tabPanel.set(tabPanelPatterns[2]);
     tabPanelInputs[0].tab.set(tabPatterns[0]);
     tabPanelInputs[1].tab.set(tabPatterns[1]);
     tabPanelInputs[2].tab.set(tabPatterns[2]);
@@ -143,8 +135,8 @@ describe('Tabs Pattern', () => {
     describe('#open', () => {
       it('should open a tab with value', () => {
         expect(tabListPattern.selectedTab()).toBeUndefined();
-        tabListPattern.open('tab-1');
-        expect(tabListPattern.selectedTab()!.value()).toBe('tab-1');
+        tabListPattern.open(tabPatterns[0]);
+        expect(tabListPattern.selectedTab()!).toBe(tabPatterns[0]);
       });
 
       it('should open a tab with tab pattern instance', () => {