Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adolgachev wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions goldens/aria/private/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,14 +682,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'>;
}

Expand All @@ -709,7 +709,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>>;
Expand All @@ -722,8 +721,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
Expand All @@ -736,7 +734,6 @@ export class TabPanelPattern {
readonly labelledBy: SignalLike<string | undefined>;
readonly labelManager: LabelControl;
readonly tabIndex: SignalLike<-1 | 0>;
readonly value: SignalLike<string>;
}

// @public
Expand All @@ -747,15 +744,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
Expand Down
56 changes: 14 additions & 42 deletions goldens/aria/tabs/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Expand All @@ -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)

```
3 changes: 0 additions & 3 deletions src/aria/private/behaviors/list-focus/list-focus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ export interface ListFocusItem {

/** Whether an item is disabled. */
disabled: SignalLike<boolean>;

/** The index of the item in the list. */
index: SignalLike<number>;
}

/** Represents the required inputs for a collection that contains focusable items. */
Expand Down
32 changes: 12 additions & 20 deletions src/aria/private/tabs/tabs.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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 = [
Expand All @@ -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]);
Expand All @@ -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', () => {
Expand Down
Loading
Loading