fix(aria/menu): accept a bare disabled attribute on MenuItem

MenuItem.disabled was declared as input<boolean>(false), so
<div ngMenuItem disabled> failed strict template type-checking and was
not disabled in JIT. Use booleanAttribute, like the disabled inputs on
the other aria directives.

Menu items are only soft-disabled, so also clear the native disabled
attribute on the host. Otherwise a bare disabled on a <button> host
would hard-disable it and take it out of keyboard navigation.

Fixes #33964

Author: DuncanFaulkner

goldens/aria/menu/index.api.md

@@ -78,7 +78,7 @@ export class MenuItem<V> implements OnInit, OnDestroy {
     constructor();
     readonly active: _angular_core.Signal<boolean>;
     close(): void;
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly expanded: _angular_core.Signal<boolean | null>;
     readonly hasPopup: _angular_core.Signal<boolean>;

src/aria/menu/menu-item.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  booleanAttribute,
   computed,
   Directive,
   effect,
@@ -51,6 +52,9 @@ import type {MenuBar} from './menu-bar';
     '[attr.aria-haspopup]': 'hasPopup()',
     '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-disabled]': '_pattern.disabled()',
+    // Menu items are only ever soft-disabled. Clear the native attribute so a bare
+    // `disabled` on a `<button>` host doesn't make the item unfocusable.
+    '[attr.disabled]': 'null',
     '[attr.aria-controls]': '_pattern.submenu()?.id()',
   },
 })
@@ -68,7 +72,7 @@ export class MenuItem<V> implements OnInit, OnDestroy {
   readonly value = input<V | undefined>(undefined);
 
   /** Whether the menu item is disabled. */
-  readonly disabled = input<boolean>(false);
+  readonly disabled = input(false, {transform: booleanAttribute});
 
   /** The search term associated with the menu item. */
   readonly searchTerm = model<string>('');

src/aria/menu/menu.spec.ts

@@ -556,6 +556,46 @@ 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');
+    });
+
+    it('should keep a disabled button item soft-disabled and focusable', async () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [MenuItemDisabledButtonExample],
+      });
+      const disabledFixture = TestBed.createComponent(MenuItemDisabledButtonExample);
+      await disabledFixture.whenStable();
+
+      const items = disabledFixture.debugElement
+        .queryAll(By.directive(MenuItem))
+        .map(debugEl => debugEl.nativeElement as HTMLButtonElement);
+
+      expect(items[1].hasAttribute('disabled')).toBe(false);
+      expect(items[1].disabled).toBe(false);
+      expect(items[1].getAttribute('aria-disabled')).toBe('true');
+
+      items[0].focus();
+      items[0].dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true}));
+      await disabledFixture.whenStable();
+      expect(document.activeElement).toBe(items[1]);
+    });
+  });
+
   describe('structural validations', () => {
     let consoleSpy: jasmine.Spy;
 
@@ -1486,3 +1526,28 @@ class CdkOverlayMenuExample {
 class MenuItemRoleOverrideExample {
   customRole = signal<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>('menuitemcheckbox');
 }
+
+@Component({
+  template: `
+    <div ngMenu>
+      <div ngMenuItem value="item0">Item 0</div>
+      <div ngMenuItem value="item1" disabled>Item 1</div>
+    </div>
+  `,
+  imports: [Menu, MenuItem],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class MenuItemDisabledAttributeExample {}
+
+@Component({
+  template: `
+    <div ngMenu>
+      <button ngMenuItem value="item0">Item 0</button>
+      <button ngMenuItem value="item1" disabled>Item 1</button>
+      <button ngMenuItem value="item2">Item 2</button>
+    </div>
+  `,
+  imports: [Menu, MenuItem],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class MenuItemDisabledButtonExample {}