fix(aria/menu): allow menu item role override (#33264)

ok7sai · web-flow · commit 50e281a7ac99 · 2026-05-17T23:06:18.000-07:00
diff --git a/goldens/aria/menu/index.api.md b/goldens/aria/menu/index.api.md
@@ -86,11 +86,12 @@ export class MenuItem<V> implements OnInit, OnDestroy {
     open(): void;
     readonly parent: Menu<V> | MenuBar<V> | null;
     readonly _pattern: MenuItemPattern<V>;
+    readonly role: _angular_core.InputSignal<"menuitem" | "menuitemradio" | "menuitemcheckbox">;
     readonly searchTerm: _angular_core.ModelSignal<string>;
     readonly submenu: _angular_core.InputSignal<Menu<V> | undefined>;
     readonly value: _angular_core.InputSignal<V>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuItem<any>, "[ngMenuItem]", ["ngMenuItem"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "searchTerm": "searchTermChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuItem<any>, "[ngMenuItem]", ["ngMenuItem"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "searchTerm": "searchTermChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItem<any>, never>;
 }
diff --git a/goldens/aria/private/index.api.md b/goldens/aria/private/index.api.md
@@ -388,6 +388,7 @@ export interface MenuInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>, '
 // @public
 export interface MenuItemInputs<V> extends Omit<ListItem<V>, 'index' | 'selectable'> {
     parent: SignalLike<MenuPattern<V> | MenuBarPattern<V> | undefined>;
+    role: SignalLike<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>;
     submenu: SignalLike<MenuPattern<V> | undefined>;
 }
 
@@ -414,7 +415,7 @@ export class MenuItemPattern<V> implements ListItem<V> {
         first?: boolean;
         last?: boolean;
     }): void;
-    readonly role: () => string;
+    readonly role: () => "menuitem" | "menuitemradio" | "menuitemcheckbox";
     readonly searchTerm: SignalLike<string>;
     readonly selectable: SignalLike<boolean>;
     readonly submenu: SignalLike<MenuPattern<V> | undefined>;
diff --git a/src/aria/menu/menu-item.ts b/src/aria/menu/menu-item.ts
@@ -44,7 +44,7 @@ import type {MenuBar} from './menu-bar';
   selector: '[ngMenuItem]',
   exportAs: 'ngMenuItem',
   host: {
-    'role': 'menuitem',
+    '[attr.role]': '_pattern.role()',
     '(focusin)': '_pattern.onFocusIn()',
     '[attr.tabindex]': '_pattern.tabIndex()',
     '[attr.data-active]': 'active()',
@@ -73,6 +73,9 @@ export class MenuItem<V> implements OnInit, OnDestroy {
   /** The search term associated with the menu item. */
   readonly searchTerm = model<string>('');
 
+  /** The role of the menu item. */
+  readonly role = input<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>('menuitem');
+
   /** A reference to the parent menu or menubar. */
   readonly parent = inject<Menu<V> | MenuBar<V>>(MENU_COMPONENT, {optional: true});
 
@@ -97,6 +100,7 @@ export class MenuItem<V> implements OnInit, OnDestroy {
     searchTerm: this.searchTerm,
     parent: computed(() => this.parent?._pattern),
     submenu: computed(() => this.submenu()?._pattern),
+    role: this.role,
   });
 
   constructor() {
diff --git a/src/aria/menu/menu.spec.ts b/src/aria/menu/menu.spec.ts
@@ -534,6 +534,28 @@ describe('Standalone Menu Pattern', () => {
     });
   });
 
+  describe('role override', () => {
+    it('should allow overriding the default menuitem role', () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [MenuItemRoleOverrideExample],
+      });
+      const roleFixture = TestBed.createComponent(MenuItemRoleOverrideExample);
+      roleFixture.detectChanges();
+
+      const items = roleFixture.debugElement
+        .queryAll(By.directive(MenuItem))
+        .map(debugEl => debugEl.nativeElement as HTMLElement);
+
+      expect(items[0].getAttribute('role')).toBe('menuitemradio');
+      expect(items[1].getAttribute('role')).toBe('menuitemcheckbox');
+
+      roleFixture.componentInstance.customRole.set('menuitem');
+      roleFixture.detectChanges();
+      expect(items[1].getAttribute('role')).toBe('menuitem');
+    });
+  });
+
   describe('structural validations', () => {
     let consoleSpy: jasmine.Spy;
 
@@ -1372,8 +1394,8 @@ class MenuItemOutsideMenu {}
 
       <ng-template
         cdkConnectedOverlay
-        [cdkConnectedOverlayOrigin]="origin"
         [cdkConnectedOverlayOpen]="menuTrigger.expanded()"
+        [cdkConnectedOverlayOrigin]="origin"
       >
         <div ngMenu #overlayMenu="ngMenu">
           <ng-template ngMenuContent>
@@ -1404,3 +1426,17 @@ class CdkOverlayMenuExample {
     this._cdr.markForCheck();
   }
 }
+
+@Component({
+  template: `
+    <div ngMenu>
+      <div ngMenuItem value="item0" role="menuitemradio">Item 0</div>
+      <div ngMenuItem value="item1" [role]="customRole()">Item 1</div>
+    </div>
+  `,
+  imports: [Menu, MenuItem],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class MenuItemRoleOverrideExample {
+  customRole = signal<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>('menuitemcheckbox');
+}
diff --git a/src/aria/private/menu/menu.spec.ts b/src/aria/private/menu/menu.spec.ts
@@ -93,6 +93,7 @@ function getMenuBarPattern(values: string[], opts?: {textDirection: 'ltr' | 'rtl
         parent: signal(menubar),
         element: signal(element),
         submenu: signal(undefined),
+        role: signal('menuitem'),
       }) as TestMenuItem;
     }),
   );
@@ -138,6 +139,7 @@ function getMenuPattern(
         parent: signal(menu),
         element: signal(element),
         submenu: signal(undefined),
+        role: signal('menuitem'),
       }) as TestMenuItem;
     }),
   );
diff --git a/src/aria/private/menu/menu.ts b/src/aria/private/menu/menu.ts
@@ -65,6 +65,9 @@ export interface MenuItemInputs<V> extends Omit<ListItem<V>, 'index' | 'selectab
 
   /** A reference to the submenu associated with the menu item. */
   submenu: SignalLike<MenuPattern<V> | undefined>;
+
+  /** The role of the menu item. */
+  role: SignalLike<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>;
 }
 
 /** The menu ui pattern class. */
@@ -796,7 +799,7 @@ export class MenuItemPattern<V> implements ListItem<V> {
   readonly controls = signal<string | undefined>(undefined);
 
   /** The role of the menu item. */
-  readonly role = () => 'menuitem';
+  readonly role = () => this.inputs.role();
 
   /** Whether the menu item has a popup. */
   readonly hasPopup = computed(() => !!this.submenu());
