diff --git a/goldens/aria/menu/index.api.md b/goldens/aria/menu/index.api.md index d87c46a8bcec..7f5b57e84ca4 100644 --- a/goldens/aria/menu/index.api.md +++ b/goldens/aria/menu/index.api.md @@ -78,7 +78,7 @@ export class MenuItem implements OnInit, OnDestroy { constructor(); readonly active: _angular_core.Signal; close(): void; - readonly disabled: _angular_core.InputSignal; + readonly disabled: _angular_core.InputSignalWithTransform; readonly element: HTMLElement; readonly expanded: _angular_core.Signal; readonly hasPopup: _angular_core.Signal; diff --git a/src/aria/menu/menu-item.ts b/src/aria/menu/menu-item.ts index 344b15d11715..e2c307705a7f 100644 --- a/src/aria/menu/menu-item.ts +++ b/src/aria/menu/menu-item.ts @@ -7,6 +7,7 @@ */ import { + booleanAttribute, computed, Directive, effect, @@ -68,7 +69,7 @@ export class MenuItem implements OnInit, OnDestroy { readonly value = input(undefined); /** Whether the menu item is disabled. */ - readonly disabled = input(false); + readonly disabled = input(false, {transform: booleanAttribute}); /** The search term associated with the menu item. */ readonly searchTerm = model(''); diff --git a/src/aria/menu/menu.spec.ts b/src/aria/menu/menu.spec.ts index e6d422b29a5c..2e6afb954b67 100644 --- a/src/aria/menu/menu.spec.ts +++ b/src/aria/menu/menu.spec.ts @@ -556,6 +556,24 @@ describe('Standalone Menu Pattern', () => { }); }); + describe('disabled attribute', () => { + it('should treat a bare disabled attribute as disabled', () => { + TestBed.resetTestingModule(); + TestBed.configureTestingModule({ + imports: [MenuItemDisabledAttributeExample], + }); + const disabledFixture = TestBed.createComponent(MenuItemDisabledAttributeExample); + disabledFixture.detectChanges(); + + const items = disabledFixture.debugElement + .queryAll(By.directive(MenuItem)) + .map(debugEl => debugEl.nativeElement as HTMLElement); + + expect(items[0].getAttribute('aria-disabled')).toBe('false'); + expect(items[1].getAttribute('aria-disabled')).toBe('true'); + }); + }); + describe('structural validations', () => { let consoleSpy: jasmine.Spy; @@ -1486,3 +1504,15 @@ class CdkOverlayMenuExample { class MenuItemRoleOverrideExample { customRole = signal<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>('menuitemcheckbox'); } + +@Component({ + template: ` +
+
Item 0
+
Item 1
+
+ `, + imports: [Menu, MenuItem], + changeDetection: ChangeDetectionStrategy.Eager, +}) +class MenuItemDisabledAttributeExample {}