diff --git a/src/aria/ui-patterns/accordion/accordion.ts b/src/aria/ui-patterns/accordion/accordion.ts index 6de91d38ee13..3855da7f5b8b 100644 --- a/src/aria/ui-patterns/accordion/accordion.ts +++ b/src/aria/ui-patterns/accordion/accordion.ts @@ -116,8 +116,6 @@ export class AccordionTriggerPattern { this.id = inputs.id; this.element = inputs.element; this.value = inputs.value; - this.accordionGroup = inputs.accordionGroup; - this.accordionPanel = inputs.accordionPanel; this.expansionControl = new ExpansionControl({ ...inputs, expansionId: inputs.value, @@ -148,10 +146,10 @@ export class AccordionTriggerPattern { /** The keydown event manager for the accordion trigger. */ keydown = computed(() => { return new KeyboardEventManager() - .on(this.prevKey, () => this.accordionGroup().navigation.prev()) - .on(this.nextKey, () => this.accordionGroup().navigation.next()) - .on('Home', () => this.accordionGroup().navigation.first()) - .on('End', () => this.accordionGroup().navigation.last()) + .on(this.prevKey, () => this.inputs.accordionGroup().navigation.prev()) + .on(this.nextKey, () => this.inputs.accordionGroup().navigation.next()) + .on('Home', () => this.inputs.accordionGroup().navigation.first()) + .on('End', () => this.inputs.accordionGroup().navigation.last()) .on(' ', () => this.expansionControl.toggle()) .on('Enter', () => this.expansionControl.toggle()); }); @@ -162,7 +160,7 @@ export class AccordionTriggerPattern { const item = this._getItem(e); if (item) { - this.accordionGroup().navigation.goto(item); + this.inputs.accordionGroup().navigation.goto(item); this.expansionControl.toggle(); } }); @@ -183,7 +181,7 @@ export class AccordionTriggerPattern { const item = this._getItem(event); if (item && this.inputs.accordionGroup().focusManager.isFocusable(item)) { - this.accordionGroup().focusManager.focus(item); + this.inputs.accordionGroup().focusManager.focus(item); } } @@ -193,7 +191,8 @@ export class AccordionTriggerPattern { } const element = e.target.closest('[role="button"]'); - return this.accordionGroup() + return this.inputs + .accordionGroup() .items() .find(i => i.element() === element); } diff --git a/src/aria/ui-patterns/tree/combobox-tree.ts b/src/aria/ui-patterns/tree/combobox-tree.ts index ab15076684d8..77aea9570e29 100644 --- a/src/aria/ui-patterns/tree/combobox-tree.ts +++ b/src/aria/ui-patterns/tree/combobox-tree.ts @@ -21,7 +21,7 @@ export class ComboboxTreePattern implements ComboboxTreeControls, V> { /** Whether the currently focused item is collapsible. */ - isItemCollapsible = () => this.activeItem()?.parent() instanceof TreeItemPattern; + isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern; /** The ARIA role for the tree. */ role = () => 'tree' as const; @@ -94,7 +94,7 @@ export class ComboboxTreePattern collapseItem = () => this.collapse(); /** Whether the specified item or the currently active item is expandable. */ - isItemExpandable(item: TreeItemPattern | undefined = this.activeItem()) { + isItemExpandable(item: TreeItemPattern | undefined = this.inputs.activeItem()) { return item ? item.expandable() : false; } diff --git a/src/aria/ui-patterns/tree/tree.ts b/src/aria/ui-patterns/tree/tree.ts index 7b7132d04b02..0d98f13111ec 100644 --- a/src/aria/ui-patterns/tree/tree.ts +++ b/src/aria/ui-patterns/tree/tree.ts @@ -7,7 +7,7 @@ */ import {computed, signal} from '@angular/core'; -import {SignalLike} from '../behaviors/signal-like/signal-like'; +import {SignalLike, WritableSignalLike} from '../behaviors/signal-like/signal-like'; import {List, ListInputs, ListItem} from '../behaviors/list/list'; import {ExpansionItem, ExpansionControl, ListExpansion} from '../behaviors/expansion/expansion'; import {KeyboardEventManager, PointerEventManager, Modifier} from '../behaviors/event-manager'; @@ -84,6 +84,30 @@ export class TreeItemPattern implements ExpansionItem { return this.tree().value().includes(this.value()) ? this.tree().currentType() : undefined; }); + /** A unique identifier for this item. */ + id: SignalLike; + + /** The value of this item. */ + value: SignalLike; + + /** A reference to the item element. */ + element: SignalLike; + + /** Whether the item is disabled. */ + disabled: SignalLike; + + /** The text used by the typeahead search. */ + searchTerm: SignalLike; + + /** The tree pattern this item belongs to. */ + tree: SignalLike>; + + /** The parent item. */ + parent: SignalLike | TreePattern>; + + /** The children items. */ + children: SignalLike[]>; + constructor(readonly inputs: TreeItemInputs) { this.id = inputs.id; this.value = inputs.value; @@ -295,6 +319,48 @@ export class TreePattern { return manager; }); + /** A unique identifier for the tree. */ + id: SignalLike; + + /** Whether the tree is in navigation mode. */ + nav: SignalLike; + + /** The aria-current type. */ + currentType: SignalLike<'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'>; + + /** All items in the tree, in document order (DFS-like, a flattened list). */ + allItems: SignalLike[]>; + + /** Whether the tree is disabled. */ + disabled: SignalLike; + + /** The currently active item in the tree. */ + activeItem: WritableSignalLike | undefined> = signal(undefined); + + /** Whether disabled items should be skipped when navigating. */ + skipDisabled: SignalLike; + + /** Whether the focus should wrap when navigating past the first or last item. */ + wrap: SignalLike; + + /** The orientation of the tree. */ + orientation: SignalLike<'vertical' | 'horizontal'>; + + /** The text direction of the tree. */ + textDirection: SignalLike<'ltr' | 'rtl'>; + + /** Whether multiple items can be selected at the same time. */ + multi: SignalLike; + + /** The selection mode of the tree. */ + selectionMode: SignalLike<'follow' | 'explicit'>; + + /** The delay in milliseconds to wait before clearing the typeahead buffer. */ + typeaheadDelay: SignalLike; + + /** The current value of the tree (the selected items). */ + value: WritableSignalLike; + constructor(readonly inputs: TreeInputs) { this.id = inputs.id; this.nav = inputs.nav;