diff --git a/src/aria/toolbar/toolbar.spec.ts b/src/aria/toolbar/toolbar.spec.ts index 18cf316c8180..b12ce99385ac 100644 --- a/src/aria/toolbar/toolbar.spec.ts +++ b/src/aria/toolbar/toolbar.spec.ts @@ -1,4 +1,4 @@ -import {Component, DebugElement, signal} from '@angular/core'; +import {Component, DebugElement, Directive, inject, signal} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from './toolbar'; @@ -533,6 +533,23 @@ describe('Toolbar', () => { expect(document.activeElement).toBe(initialActiveElement); }); }); + + describe('with wrapped toolbar widgets', () => { + beforeEach(() => { + TestBed.configureTestingModule({imports: [WrappedToolbarExample]}); + fixture = TestBed.createComponent(WrappedToolbarExample) as any; + fixture.detectChanges(); + }); + + it('should navigate on click', () => { + const widgets = fixture.debugElement + .queryAll(By.css('[toolbar-button]')) + .map((debugEl: DebugElement) => debugEl.nativeElement as HTMLElement); + console.log('clicking:', widgets[0]); + click(widgets[0]); + expect(document.activeElement).toBe(widgets[0]); + }); + }); }); describe('Selection', () => { @@ -638,3 +655,27 @@ class ToolbarExample { groups = [{disabled: signal(false)}]; } + +@Directive({ + selector: 'button[toolbar-button]', + hostDirectives: [{directive: ToolbarWidget, inputs: ['value', 'disabled']}], + host: { + type: 'button', + class: 'example-button material-symbols-outlined', + '[aria-label]': 'widget.value()', + }, +}) +export class SimpleToolbarButton { + widget = inject(ToolbarWidget); +} + +@Component({ + template: ` +
+ + +
+ `, + imports: [Toolbar, SimpleToolbarButton], +}) +class WrappedToolbarExample {} diff --git a/src/aria/toolbar/toolbar.ts b/src/aria/toolbar/toolbar.ts index 680607dcdba1..b58ee19e0faa 100644 --- a/src/aria/toolbar/toolbar.ts +++ b/src/aria/toolbar/toolbar.ts @@ -159,8 +159,7 @@ export class Toolbar { /** Finds the toolbar item associated with a given element. */ private _getItem(element: Element) { - const widgetTarget = element.closest('[ngToolbarWidget]'); - return this._itemPatterns().find(widget => widget.element() === widgetTarget); + return this._itemPatterns().find(item => item.element()?.contains(element)); } }