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
11 changes: 4 additions & 7 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'> {
export interface TabInputs extends Omit<ListNavigationItem, 'index'>, Omit<ExpansionItem, 'expandable' | 'expanded'> {
tablist: SignalLike<TabListPattern>;
tabpanel: SignalLike<TabPanelPattern | undefined>;
value: SignalLike<string>;
}

// @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,6 @@ export class TabListPattern {
// @public
export interface TabPanelInputs extends LabelControlOptionalInputs {
id: SignalLike<string>;
tab: SignalLike<TabPattern | undefined>;
value: SignalLike<string>;
}

// @public
Expand All @@ -735,8 +732,8 @@ export class TabPanelPattern {
readonly inputs: TabPanelInputs;
readonly labelledBy: SignalLike<string | undefined>;
readonly labelManager: LabelControl;
readonly tab: WritableSignalLike<TabPattern | undefined>;
readonly tabIndex: SignalLike<-1 | 0>;
readonly value: SignalLike<string>;
}

// @public
Expand All @@ -747,6 +744,7 @@ 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>;
Expand All @@ -755,7 +753,6 @@ export class TabPattern {
open(): boolean;
readonly selected: SignalLike<boolean>;
readonly tabIndex: SignalLike<0 | -1>;
readonly value: SignalLike<string>;
}

// @public
Expand Down
54 changes: 12 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,25 @@

```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';

// @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 +36,41 @@ 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 selectedTab: _angular_core.WritableSignal<TabPattern | 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>;
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)

```
23 changes: 6 additions & 17 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,6 +65,7 @@ describe('Tabs Pattern', () => {
softDisabled: signal(true),
items: signal([]),
element: signal(document.createElement('div')),
selectedTab: signal(undefined),
};
tabListPattern = new TabListPattern(tabListInputs);

Expand All @@ -76,26 +77,20 @@ describe('Tabs Pattern', () => {
id: signal('tab-1-id'),
element: signal(createTabElement()),
disabled: signal(false),
value: signal('tab-1'),
expanded: signal(false),
},
{
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),
id: signal('tab-3-id'),
element: signal(createTabElement()),
disabled: signal(false),
value: signal('tab-3'),
expanded: signal(false),
},
];
tabPatterns = [
Expand All @@ -108,18 +103,12 @@ describe('Tabs Pattern', () => {
tabPanelInputs = [
{
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 @@ -132,9 +121,9 @@ describe('Tabs Pattern', () => {
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]);
tabPanelPatterns[0].tab.set(tabPatterns[0]);
tabPanelPatterns[1].tab.set(tabPatterns[1]);
tabPanelPatterns[2].tab.set(tabPatterns[2]);
tabListInputs.items.set(tabPatterns);
tabListInputs.activeItem.set(tabPatterns[0]);
});
Expand All @@ -143,8 +132,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