refactor(aria/tabs): Clean up tab selection and linking to panels (#32859)

Author: adolgachev

goldens/aria/private/index.api.md

@@ -660,14 +660,14 @@ export type SignalLike<T> = () => T;
 export function sortDirectives(a: HasElement, b: HasElement): 1 | -1;
 
 // @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'>;
 }
 
@@ -690,7 +690,6 @@ export class TabListPattern {
     onClick(event: PointerEvent): void;
     onFocusIn(): void;
     onKeydown(event: KeyboardEvent): void;
-    open(value: string): boolean;
     open(tab?: TabPattern): boolean;
     readonly orientation: SignalLike<'vertical' | 'horizontal'>;
     readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
@@ -703,8 +702,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
@@ -717,7 +715,6 @@ export class TabPanelPattern {
     readonly labelledBy: SignalLike<string | undefined>;
     readonly labelManager: LabelControl;
     readonly tabIndex: SignalLike<-1 | 0>;
-    readonly value: SignalLike<string>;
 }
 
 // @public
@@ -728,15 +725,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

@@ -8,6 +8,7 @@ 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 {
@@ -20,6 +21,7 @@ export class Tab implements HasElement, OnInit, OnDestroy {
     // (undocumented)
     ngOnInit(): void;
     open(): void;
+    readonly panel: _angular_core.Signal<TabPanel | undefined>;
     readonly _pattern: TabPattern;
     readonly selected: _angular_core.Signal<boolean>;
     readonly value: _angular_core.InputSignal<string>;
@@ -42,6 +44,8 @@ export class TabList implements OnInit, OnDestroy {
     constructor();
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
+    // (undocumented)
+    findTab(value?: string): Tab | undefined;
     readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
     // (undocumented)
     ngOnDestroy(): void;
@@ -51,14 +55,14 @@ export class TabList implements OnInit, OnDestroy {
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TabListPattern;
     // (undocumented)
-    _register(child: Tab): void;
+    _registerTab(child: Tab): void;
     readonly selectedTab: _angular_core.ModelSignal<string | undefined>;
     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>;
+    readonly _sortedTabs: _angular_core.Signal<Tab[]>;
+    readonly textDirection: WritableSignal<_angular_cdk_bidi.Direction>;
     // (undocumented)
-    _unregister(child: Tab): void;
+    _unregisterTab(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>;
@@ -76,6 +80,7 @@ export class TabPanel implements OnInit, OnDestroy {
     // (undocumented)
     ngOnInit(): void;
     readonly _pattern: TabPanelPattern;
+    readonly _tabPattern: WritableSignal<TabPattern | undefined>;
     readonly value: _angular_core.InputSignal<string>;
     readonly visible: _angular_core.Signal<boolean>;
     // (undocumented)
@@ -86,13 +91,18 @@ export class TabPanel implements OnInit, OnDestroy {
 
 // @public
 export class Tabs {
+    constructor();
     readonly element: HTMLElement;
     // (undocumented)
-    _register(child: TabList | TabPanel): void;
-    readonly _tabPatterns: _angular_core.Signal<TabPattern[] | undefined>;
-    readonly _unorderedTabpanelPatterns: _angular_core.Signal<TabPanelPattern[]>;
+    findTabPanel(value?: string): TabPanel | undefined;
+    // (undocumented)
+    _registerList(list: TabList): void;
+    // (undocumented)
+    _registerPanel(panel: TabPanel): void;
+    // (undocumented)
+    _unregisterList(list: TabList): void;
     // (undocumented)
-    _unregister(child: TabList | TabPanel): void;
+    _unregisterPanel(panel: TabPanel): void;
     // (undocumented)
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Tabs, "[ngTabs]", ["ngTabs"], {}, {}, never, never, true, never>;
     // (undocumented)

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', () => {