refactor(aria/tabs): move selection of tabs to each tab

Author: adolgachev

goldens/aria/private/index.api.md

@@ -665,13 +665,13 @@ export type SignalLike<T> = () => T;
 
 // @public
 export interface TabInputs extends Omit<ListNavigationItem, 'index'>, Omit<ExpansionItem, 'expandable' | 'expanded'> {
+    readonly selected: WritableSignalLike<boolean>;
     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'>;
 }
 
@@ -695,7 +695,6 @@ export class TabListPattern {
     readonly orientation: SignalLike<'vertical' | 'horizontal'>;
     readonly pointerdown: SignalLike<PointerEventManager<PointerEvent>>;
     readonly prevKey: SignalLike<"ArrowUp" | "ArrowRight" | "ArrowLeft">;
-    readonly selectedTab: WritableSignalLike<TabPattern | undefined>;
     setDefaultState(): void;
     readonly tabIndex: SignalLike<0 | -1>;
 }
@@ -726,13 +725,11 @@ export class TabPattern {
     readonly disabled: SignalLike<boolean>;
     readonly element: SignalLike<HTMLElement>;
     readonly expandable: SignalLike<boolean>;
-    // (undocumented)
     readonly expanded: WritableSignalLike<boolean>;
     readonly id: SignalLike<string>;
     // (undocumented)
     readonly inputs: TabInputs;
     open(): boolean;
-    readonly selected: SignalLike<boolean>;
     readonly tabIndex: SignalLike<0 | -1>;
 }
 

goldens/aria/tabs/index.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { AfterViewInit } from '@angular/core';
+import * as _angular_aria_private_public_api from '@angular/aria/private/public-api';
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -21,9 +22,9 @@ export class Tab implements AfterViewInit {
     open(): void;
     readonly panel: _angular_core.InputSignal<TabPanel>;
     readonly _pattern: TabPattern;
-    readonly selected: _angular_core.Signal<boolean>;
+    readonly selected: _angular_core.ModelSignal<boolean>;
     // (undocumented)
-    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>;
+    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; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, never>;
 }
@@ -38,22 +39,20 @@ export class TabContent {
 
 // @public
 export class TabList implements AfterViewInit {
-    constructor();
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
     // (undocumented)
     ngAfterViewInit(): void;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TabListPattern;
-    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 _tabPatterns: _angular_core.Signal<_angular_aria_private_public_api.TabPattern[]>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
     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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; "isSignal": true; }; }, { "selectedTabIndex": "selectedTabIndexChange"; }, ["_tabs"], 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; }; }, {}, ["_tabs"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabList, never>;
 }

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

@@ -65,7 +65,6 @@ describe('Tabs Pattern', () => {
       softDisabled: signal(true),
       items: signal([]),
       element: signal(document.createElement('div')),
-      selectedTab: signal(undefined),
     };
     tabListPattern = new TabListPattern(tabListInputs);
 
@@ -77,20 +76,23 @@ describe('Tabs Pattern', () => {
         id: signal('tab-1-id'),
         element: signal(createTabElement()),
         disabled: signal(false),
+        selected: signal(false),
       },
       {
         tabList: signal(tabListPattern),
         tabPanel: signal(undefined),
         id: signal('tab-2-id'),
         element: signal(createTabElement()),
         disabled: signal(false),
+        selected: signal(false),
       },
       {
         tabList: signal(tabListPattern),
         tabPanel: signal(undefined),
         id: signal('tab-3-id'),
         element: signal(createTabElement()),
         disabled: signal(false),
+        selected: signal(false),
       },
     ];
     tabPatterns = [
@@ -133,23 +135,15 @@ describe('Tabs Pattern', () => {
 
   describe('TabListPattern', () => {
     describe('#open', () => {
-      it('should open a tab with value', () => {
-        expect(tabListPattern.selectedTab()).toBeUndefined();
-        tabListPattern.open(tabPatterns[0]);
-        expect(tabListPattern.selectedTab()!).toBe(tabPatterns[0]);
-      });
-
       it('should open a tab with tab pattern instance', () => {
-        expect(tabListPattern.selectedTab()).toBeUndefined();
-        tabListPattern.open(tabPatterns[0]);
-        expect(tabListPattern.selectedTab()).toBe(tabPatterns[0]);
+        tabListPattern.open(tabPatterns[1]);
+        expect(tabPatterns[1].expanded()).toBeTrue();
       });
 
       it('should open the active tab', () => {
-        expect(tabListPattern.selectedTab()).toBeUndefined();
         expect(tabListPattern.activeTab()).toBe(tabPatterns[0]);
         tabListPattern.open();
-        expect(tabListPattern.selectedTab()).toBe(tabPatterns[0]);
+        expect(tabPatterns[0].expanded()).toBeTrue();
       });
     });
 
@@ -172,22 +166,21 @@ describe('Tabs Pattern', () => {
       it('should set activeIndex to the first focusable tab if no tabs are selected', () => {
         tabListInputs.softDisabled.set(false);
         tabListInputs.activeItem.set(tabPatterns[2]);
-        tabListPattern.selectedTab.set(undefined);
         tabInputs[0].disabled.set(true);
         tabListPattern.setDefaultState();
         expect(tabListInputs.activeItem()).toBe(tabPatterns[1]);
       });
 
       it('should set activeIndex to the first focusable and selected tab', () => {
         tabListInputs.activeItem.set(tabPatterns[0]);
-        tabListPattern.selectedTab.set(tabPatterns[2]);
+        tabPatterns[2].expanded.set(true);
         tabListPattern.setDefaultState();
         expect(tabListInputs.activeItem()).toBe(tabPatterns[2]);
       });
 
       it('should set activeIndex to the first focusable tab when the selected tab is not focusable', () => {
         tabListInputs.softDisabled.set(false);
-        tabListPattern.selectedTab.set(tabPatterns[1]);
+        tabPatterns[1].expanded.set(true);
         tabInputs[1].disabled.set(true);
         tabListPattern.setDefaultState();
         expect(tabListInputs.activeItem()).toBe(tabPatterns[0]);
@@ -221,37 +214,37 @@ describe('Tabs Pattern', () => {
 
       it('selects a tab by focus if `selectionMode` is "follow".', () => {
         tabListPattern.onKeydown(space());
-        expect(tabPatterns[0].selected()).toBeTrue();
-        expect(tabPatterns[1].selected()).toBeFalse();
+        expect(tabPatterns[0].expanded()).toBeTrue();
+        expect(tabPatterns[1].expanded()).toBeFalse();
         tabListPattern.onKeydown(right());
-        expect(tabPatterns[0].selected()).toBeFalse();
-        expect(tabPatterns[1].selected()).toBeTrue();
+        expect(tabPatterns[0].expanded()).toBeFalse();
+        expect(tabPatterns[1].expanded()).toBeTrue();
       });
 
       it('selects a tab by enter key if `selectionMode` is "explicit".', () => {
         tabListInputs.selectionMode.set('explicit');
         tabListPattern.onKeydown(space());
-        expect(tabPatterns[0].selected()).toBeTrue();
-        expect(tabPatterns[1].selected()).toBeFalse();
+        expect(tabPatterns[0].expanded()).toBeTrue();
+        expect(tabPatterns[1].expanded()).toBeFalse();
         tabListPattern.onKeydown(right());
-        expect(tabPatterns[0].selected()).toBeTrue();
-        expect(tabPatterns[1].selected()).toBeFalse();
+        expect(tabPatterns[0].expanded()).toBeTrue();
+        expect(tabPatterns[1].expanded()).toBeFalse();
         tabListPattern.onKeydown(enter());
-        expect(tabPatterns[0].selected()).toBeFalse();
-        expect(tabPatterns[1].selected()).toBeTrue();
+        expect(tabPatterns[0].expanded()).toBeFalse();
+        expect(tabPatterns[1].expanded()).toBeTrue();
       });
 
       it('selects a tab by space key if `selectionMode` is "explicit".', () => {
         tabListInputs.selectionMode.set('explicit');
         tabListPattern.onKeydown(space());
-        expect(tabPatterns[0].selected()).toBeTrue();
-        expect(tabPatterns[1].selected()).toBeFalse();
+        expect(tabPatterns[0].expanded()).toBeTrue();
+        expect(tabPatterns[1].expanded()).toBeFalse();
         tabListPattern.onKeydown(right());
-        expect(tabPatterns[0].selected()).toBeTrue();
-        expect(tabPatterns[1].selected()).toBeFalse();
+        expect(tabPatterns[0].expanded()).toBeTrue();
+        expect(tabPatterns[1].expanded()).toBeFalse();
         tabListPattern.onKeydown(space());
-        expect(tabPatterns[0].selected()).toBeFalse();
-        expect(tabPatterns[1].selected()).toBeTrue();
+        expect(tabPatterns[0].expanded()).toBeFalse();
+        expect(tabPatterns[1].expanded()).toBeTrue();
       });
 
       it('uses left key to navigate to the previous tab when `orientation` is set to "horizontal".', () => {
@@ -347,22 +340,21 @@ describe('Tabs Pattern', () => {
 
     describe('#open', () => {
       it('should open the current tab', () => {
-        expect(tabListPattern.selectedTab()).toBeUndefined();
-        tabPatterns[0].open();
-        expect(tabListPattern.selectedTab()).toBe(tabPatterns[0]);
+        tabPatterns[1].open();
+        expect(tabPatterns[1].expanded()).toBeTrue();
       });
     });
   });
 
   describe('TabPanelPattern', () => {
     it('should set a tabpanel to be not hidden if a tab is opened', () => {
       tabPatterns[0].open();
-      expect(tabPatterns[0].selected()).toBeTrue();
+      expect(tabPatterns[0].expanded()).toBeTrue();
       expect(tabPanelPatterns[0].hidden()).toBeFalse();
     });
 
     it('sets a tabpanel to be hidden if a tab is not opened', () => {
-      expect(tabPatterns[1].selected()).toBeFalse();
+      expect(tabPatterns[1].expanded()).toBeFalse();
       expect(tabPanelPatterns[1].hidden()).toBeTrue();
     });
 

src/aria/private/tabs/tabs.ts

@@ -8,12 +8,7 @@
 
 import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
 import {ExpansionItem, ListExpansion, ListExpansionInputs} from '../behaviors/expansion/expansion';
-import {
-  SignalLike,
-  WritableSignalLike,
-  computed,
-  linkedSignal,
-} from '../behaviors/signal-like/signal-like';
+import {SignalLike, WritableSignalLike, computed} from '../behaviors/signal-like/signal-like';
 import {LabelControl, LabelControlOptionalInputs} from '../behaviors/label/label';
 import {ListFocus} from '../behaviors/list-focus/list-focus';
 import {
@@ -30,6 +25,9 @@ export interface TabInputs
 
   /** The remote tabpanel controlled by the tab. */
   tabPanel: SignalLike<TabPanelPattern | undefined>;
+
+  /** Whether the tab is selected. */
+  readonly selected: WritableSignalLike<boolean>;
 }
 
 /** A tab in a tablist. */
@@ -46,22 +44,12 @@ export class TabPattern {
   /** Whether this tab has expandable panel. */
   readonly expandable: SignalLike<boolean> = () => true;
 
-  /*
-   * Whether the tab panel is expanded.
-   * Primarily controlled by the behavior, which will read/write this value.
-   * The consumer of this pattern will instead only use the selectedTab input.
-   * The pattern will be responsible for synchronizing their state.
-   */
-  readonly expanded: WritableSignalLike<boolean> = linkedSignal(
-    () => this.inputs.tabList().selectedTab() === this,
-  );
+  /** Whether the tab panel is expanded. */
+  readonly expanded: WritableSignalLike<boolean>; // set from inputs (selected)
 
   /** Whether the tab is active. */
   readonly active = computed(() => this.inputs.tabList().inputs.activeItem() === this);
 
-  /** Whether the tab is selected. */
-  readonly selected = computed(() => this.inputs.tabList().selectedTab() === this);
-
   /** The tab index of the tab. */
   readonly tabIndex = computed(() => this.inputs.tabList().focusBehavior.getItemTabIndex(this));
 
@@ -71,6 +59,7 @@ export class TabPattern {
   constructor(readonly inputs: TabInputs) {
     this.id = inputs.id;
     this.disabled = inputs.disabled;
+    this.expanded = inputs.selected;
   }
 
   /** Opens the tab. */
@@ -126,9 +115,6 @@ export interface TabListInputs
     Omit<ListExpansionInputs, 'multiExpandable' | 'items'> {
   /** The selection strategy used by the tablist. */
   selectionMode: SignalLike<'follow' | 'explicit'>;
-
-  /** The currently selected tab. */
-  selectedTab: WritableSignalLike<TabPattern | undefined>;
 }
 
 /** Controls the state of a tablist. */
@@ -146,7 +132,6 @@ export class TabListPattern {
   readonly activeTab: SignalLike<TabPattern | undefined>; // set from inputs
 
   /** The currently selected tab. */
-  readonly selectedTab: WritableSignalLike<TabPattern | undefined>; // set from inputs
 
   /** Whether the tablist is vertically or horizontally oriented. */
   readonly orientation: SignalLike<'vertical' | 'horizontal'>; // set from inputs
@@ -206,7 +191,6 @@ export class TabListPattern {
   });
 
   constructor(readonly inputs: TabListInputs) {
-    this.selectedTab = inputs.selectedTab;
     this.activeTab = inputs.activeItem;
     this.orientation = inputs.orientation;
     this.disabled = inputs.disabled;
@@ -242,14 +226,22 @@ export class TabListPattern {
         firstItem = item;
       }
 
-      if (item.selected()) {
+      if (item.expanded()) {
         this.inputs.activeItem.set(item);
         return;
       }
     }
     if (firstItem !== undefined) {
       this.inputs.activeItem.set(firstItem);
     }
+
+    const selectedTabs = this.inputs.items().filter(tab => tab.expanded());
+    if (selectedTabs.length == 0) {
+      firstItem?.expanded.set(true);
+    } else if (selectedTabs.length > 1) {
+      // If multiple tabs are selected, only the first one should be expanded.
+      selectedTabs.slice(1).forEach(tab => tab.expanded.set(false));
+    }
   }
 
   /** Handles keydown events for the tablist. */
@@ -273,12 +265,7 @@ export class TabListPattern {
 
     if (tab === undefined) return false;
 
-    const success = this.expansionBehavior.open(tab);
-    if (success) {
-      this.selectedTab.set(tab);
-    }
-
-    return success;
+    return this.expansionBehavior.open(tab);
   }
 
   /** Executes a navigation operation and expand the active tab if needed. */