From c88fbb4f970b011660cfd619ea3ecea7cd8d8b6a Mon Sep 17 00:00:00 2001 From: Andrey Dolgachev Date: Tue, 28 Oct 2025 19:52:21 -0700 Subject: [PATCH] feat(aria/toolbar): Extend public api with navigation methods --- src/aria/private/toolbar/toolbar.ts | 32 +++++++++++++------------- src/aria/toolbar/toolbar.ts | 35 +++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/aria/private/toolbar/toolbar.ts b/src/aria/private/toolbar/toolbar.ts index ff704976cc6a..4bf8a9ddeda5 100644 --- a/src/aria/private/toolbar/toolbar.ts +++ b/src/aria/private/toolbar/toolbar.ts @@ -79,21 +79,21 @@ export class ToolbarPattern { const manager = new KeyboardEventManager(); return manager - .on(this._nextKey, () => this._next()) - .on(this._prevKey, () => this._prev()) - .on(this._altNextKey, () => this._groupNext()) - .on(this._altPrevKey, () => this._groupPrev()) - .on(' ', () => this._trigger()) - .on('Enter', () => this._trigger()) - .on('Home', () => this._first()) - .on('End', () => this._last()); + .on(this._nextKey, () => this.next()) + .on(this._prevKey, () => this.prev()) + .on(this._altNextKey, () => this.groupNext()) + .on(this._altPrevKey, () => this.groupPrev()) + .on(' ', () => this.trigger()) + .on('Enter', () => this.trigger()) + .on('Home', () => this.first()) + .on('End', () => this.last()); }); /** The pointerdown event manager for the toolbar. */ private readonly _pointerdown = computed(() => new PointerEventManager().on(e => this._goto(e))); /** Navigates to the next widget in the toolbar. */ - private _next() { + next() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetGroupPattern) { if (!item.disabled() && !item.controls().isOnLastItem()) { @@ -111,7 +111,7 @@ export class ToolbarPattern { } /** Navigates to the previous widget in the toolbar. */ - private _prev() { + prev() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetGroupPattern) { if (!item.disabled() && !item.controls().isOnFirstItem()) { @@ -128,20 +128,22 @@ export class ToolbarPattern { } } - private _groupNext() { + /** Navigates to the next group in the toolbar. */ + groupNext() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetPattern) return; item?.controls().next(true); } - private _groupPrev() { + /** Navigates to the previous group in the toolbar. */ + groupPrev() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetPattern) return; item?.controls().prev(true); } /** Triggers the action of the currently active widget. */ - private _trigger() { + trigger() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetGroupPattern) { item.controls().trigger(); @@ -149,7 +151,7 @@ export class ToolbarPattern { } /** Navigates to the first widget in the toolbar. */ - private _first() { + first() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetGroupPattern) { item.controls().unfocus(); @@ -163,7 +165,7 @@ export class ToolbarPattern { } /** Navigates to the last widget in the toolbar. */ - private _last() { + last() { const item = this.inputs.activeItem(); if (item instanceof ToolbarWidgetGroupPattern) { item.controls().unfocus(); diff --git a/src/aria/toolbar/toolbar.ts b/src/aria/toolbar/toolbar.ts index f36a6fc2caca..8c56355fac67 100644 --- a/src/aria/toolbar/toolbar.ts +++ b/src/aria/toolbar/toolbar.ts @@ -148,6 +148,41 @@ export class Toolbar { } } + /** Navigates to the next widget in the toolbar. */ + next(): void { + this._pattern.next(); + } + + /** Navigates to the previous widget in the toolbar. */ + prev(): void { + this._pattern.prev(); + } + + /** Navigates to the first widget in the toolbar. */ + first(): void { + this._pattern.first(); + } + + /** Navigates to the last widget in the toolbar. */ + last(): void { + this._pattern.last(); + } + + /** Navigates to the next group in the toolbar. */ + groupNext() { + this._pattern.groupNext(); + } + + /** Navigates to the previous group in the toolbar. */ + groupPrev() { + this._pattern.groupPrev(); + } + + /** Triggers the action of the currently active widget. */ + trigger() { + this._pattern.trigger(); + } + /** Finds the toolbar item associated with a given element. */ private _getItem(element: Element) { const widgetTarget = element.closest('.ng-toolbar-widget');