From 30571ec3b6ea2e52809f8fc51e49b710a3376fea Mon Sep 17 00:00:00 2001
From: Duncan Faulkner <duncan@anglebrackets.dev>
Date: Thu, 15 Oct 2026 21:15:06 +0100
Subject: [PATCH] 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
---
 goldens/aria/menu/index.api.md |  2 +-
 src/aria/menu/menu-item.ts     |  6 +++-
 src/aria/menu/menu.spec.ts     | 65 ++++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 2 deletions(-)

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<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>;
diff --git a/src/aria/menu/menu-item.ts b/src/aria/menu/menu-item.ts
index 344b15d11715..22e9ea953d83 100644
--- a/src/aria/menu/menu-item.ts
+++ b/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>('');
diff --git a/src/aria/menu/menu.spec.ts b/src/aria/menu/menu.spec.ts
index e6d422b29a5c..a7d654312aa6 100644
--- a/src/aria/menu/menu.spec.ts
+++ b/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 {}