fix(aria/menu): disabled state (angular#32301)

* fix(aria/menu): disabled state

* fixup! fix(aria/menu): disabled state

* fixup! fix(aria/menu): disabled state

Author: wagnermaciel

src/aria/menu/menu.ts

@@ -8,6 +8,7 @@
 
 import {
   afterRenderEffect,
+  booleanAttribute,
   computed,
   contentChildren,
   Directive,
@@ -47,6 +48,8 @@ import {Directionality} from '@angular/cdk/bidi';
   host: {
     'class': 'ng-menu-trigger',
     '[attr.tabindex]': '_pattern.tabIndex()',
+    '[attr.disabled]': '!softDisabled() && _pattern.disabled() ? true : null',
+    '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.aria-haspopup]': 'hasPopup()',
     '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-controls]': '_pattern.menu()?.id()',
@@ -75,11 +78,18 @@ export class MenuTrigger<V> {
   /** Whether the menu trigger has a popup. */
   readonly hasPopup = computed(() => this._pattern.hasPopup());
 
+  /** Whether the menu trigger is disabled. */
+  readonly disabled = input(false, {transform: booleanAttribute});
+
+  /** Whether the menu trigger is soft disabled. */
+  readonly softDisabled = input(true, {transform: booleanAttribute});
+
   /** The menu trigger ui pattern instance. */
   _pattern: MenuTriggerPattern<V> = new MenuTriggerPattern({
     textDirection: this.textDirection,
     element: computed(() => this._elementRef.nativeElement),
     menu: computed(() => this.menu()?._pattern),
+    disabled: () => this.disabled(),
   });
 
   constructor() {
@@ -122,6 +132,8 @@ export class MenuTrigger<V> {
     'role': 'menu',
     'class': 'ng-menu',
     '[attr.id]': '_pattern.id()',
+    '[attr.aria-disabled]': '_pattern.disabled()',
+    '[attr.tabindex]': 'tabIndex()',
     '[attr.data-visible]': 'isVisible()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(mouseover)': '_pattern.onMouseOver($event)',
@@ -162,11 +174,14 @@ export class Menu<V> {
   readonly id = input<string>(inject(_IdGenerator).getId('ng-menu-', true));
 
   /** Whether the menu should wrap its items. */
-  readonly wrap = input<boolean>(true);
+  readonly wrap = input(true, {transform: booleanAttribute});
 
   /** The delay in seconds before the typeahead buffer is cleared. */
   readonly typeaheadDelay = input<number>(0.5); // Picked arbitrarily.
 
+  /** Whether the menu is disabled. */
+  readonly disabled = input(false, {transform: booleanAttribute});
+
   /** A reference to the parent menu item or menu trigger. */
   readonly parent = signal<MenuTrigger<V> | MenuItem<V> | undefined>(undefined);
 
@@ -185,11 +200,14 @@ export class Menu<V> {
   /** Whether the menu is visible. */
   readonly isVisible = computed(() => this._pattern.isVisible());
 
+  /** The tab index of the menu. */
+  readonly tabIndex = computed(() => this._pattern.tabIndex());
+
   /** A callback function triggered when a menu item is selected. */
   onSelect = output<V>();
 
-  /** The delay in milliseconds before expanding sub-menus on hover. */
-  readonly expansionDelay = input<number>(150); // Arbitrarily chosen.
+  /** The delay in seconds before expanding sub-menus on hover. */
+  readonly expansionDelay = input<number>(0.1); // Arbitrarily chosen.
 
   constructor() {
     this._pattern = new MenuPattern({
@@ -228,7 +246,7 @@ export class Menu<V> {
     });
 
     afterRenderEffect(() => {
-      if (!this._pattern.hasBeenFocused()) {
+      if (!this._pattern.hasBeenFocused() && this._items().length) {
         untracked(() => this._pattern.setDefaultState());
       }
     });
@@ -255,6 +273,9 @@ export class Menu<V> {
   host: {
     'role': 'menubar',
     'class': 'ng-menu-bar',
+    '[attr.disabled]': '!softDisabled() && _pattern.disabled() ? true : null',
+    '[attr.aria-disabled]': '_pattern.disabled()',
+    '[attr.tabindex]': '_pattern.tabIndex()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(mouseover)': '_pattern.onMouseOver($event)',
     '(click)': '_pattern.onClick($event)',
@@ -275,14 +296,20 @@ export class MenuBar<V> {
   /** A reference to the menubar element. */
   readonly element: HTMLElement = this._elementRef.nativeElement;
 
+  /** Whether the menubar is disabled. */
+  readonly disabled = input(false, {transform: booleanAttribute});
+
+  /** Whether the menubar is soft disabled. */
+  readonly softDisabled = input(true, {transform: booleanAttribute});
+
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   readonly textDirection = inject(Directionality).valueSignal;
 
   /** The values of the menu. */
   readonly values = model<V[]>([]);
 
   /** Whether the menu should wrap its items. */
-  readonly wrap = input<boolean>(true);
+  readonly wrap = input(true, {transform: booleanAttribute});
 
   /** The delay in seconds before the typeahead buffer is cleared. */
   readonly typeaheadDelay = input<number>(0.5);

src/aria/private/menu/menu.spec.ts

@@ -13,8 +13,9 @@ import {ModifierKeys} from '@angular/cdk/testing';
 
 // Test types
 type TestMenuItem = MenuItemPattern<string> & {
-  disabled: WritableSignal<boolean>;
-  submenu: WritableSignal<MenuPattern<string> | undefined>;
+  inputs: {
+    disabled: WritableSignal<boolean>;
+  };
 };
 
 // Keyboard event helpers
@@ -43,6 +44,7 @@ function getMenuTriggerPattern(opts?: {textDirection: 'ltr' | 'rtl'}) {
     textDirection: signal(opts?.textDirection || 'ltr'),
     element,
     menu: submenu,
+    disabled: signal(false),
   });
   return trigger;
 }
@@ -63,6 +65,7 @@ function getMenuBarPattern(values: string[], opts?: {textDirection: 'ltr' | 'rtl
     softDisabled: signal(true),
     focusMode: signal('activedescendant'),
     element: signal(document.createElement('div')),
+    disabled: signal(false),
   });
 
   items.set(
@@ -106,6 +109,7 @@ function getMenuPattern(
     selectionMode: signal('explicit'),
     element: signal(document.createElement('div')),
     expansionDelay: signal(0),
+    disabled: signal(false),
   });
 
   items.set(
@@ -275,7 +279,7 @@ describe('Standalone Menu Pattern', () => {
 
     it('should not select a disabled item', () => {
       const items = menu.inputs.items() as TestMenuItem[];
-      items[1].disabled.set(true);
+      items[1].inputs.disabled.set(true);
       menu.inputs.activeItem.set(items[1]);
       menu.inputs.onSelect = jasmine.createSpy('onSelect');
 

src/aria/private/menu/menu.ts

@@ -12,7 +12,7 @@ import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {List, ListInputs, ListItem} from '../behaviors/list/list';
 
 /** The inputs for the MenuBarPattern class. */
-export interface MenuBarInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>, 'disabled'> {
+export interface MenuBarInputs<V> extends ListInputs<MenuItemPattern<V>, V> {
   /** The menu items contained in the menu. */
   items: SignalLike<MenuItemPattern<V>[]>;
 
@@ -24,8 +24,7 @@ export interface MenuBarInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>
 }
 
 /** The inputs for the MenuPattern class. */
-export interface MenuInputs<V>
-  extends Omit<ListInputs<MenuItemPattern<V>, V>, 'values' | 'disabled'> {
+export interface MenuInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>, 'values'> {
   /** The unique ID of the menu. */
   id: SignalLike<string>;
 
@@ -55,6 +54,9 @@ export interface MenuTriggerInputs<V> {
 
   /** The text direction of the menu bar. */
   textDirection: SignalLike<'ltr' | 'rtl'>;
+
+  /** Whether the menu trigger is disabled. */
+  disabled: SignalLike<boolean>;
 }
 
 /** The inputs for the MenuItemPattern class. */
@@ -74,6 +76,9 @@ export class MenuPattern<V> {
   /** The role of the menu. */
   role = () => 'menu';
 
+  /** Whether the menu is disabled. */
+  disabled = () => this.inputs.disabled();
+
   /** Whether the menu is visible. */
   isVisible = computed(() => (this.inputs.parent() ? !!this.inputs.parent()?.expanded() : true));
 
@@ -92,6 +97,9 @@ export class MenuPattern<V> {
   /** Timeout used to close sub-menus on hover out. */
   _closeTimeout: any;
 
+  /** The tab index of the menu. */
+  tabIndex = () => this.listBehavior.tabIndex();
+
   /** Whether the menu should be focused on mouse over. */
   shouldFocus = computed(() => {
     const root = this.root();
@@ -166,14 +174,13 @@ export class MenuPattern<V> {
     this.listBehavior = new List<MenuItemPattern<V>, V>({
       ...inputs,
       values: signal([]),
-      disabled: () => false,
     });
   }
 
   /** Sets the default state for the menu. */
   setDefaultState() {
     if (!this.inputs.parent()) {
-      this.inputs.activeItem.set(this.inputs.items()[0]);
+      this.listBehavior.goto(this.inputs.items()[0], {focusElement: false});
     }
   }
 
@@ -225,7 +232,7 @@ export class MenuPattern<V> {
       this._closeTimeout = setTimeout(() => {
         item.close();
         this._closeTimeout = undefined;
-      }, this.inputs.expansionDelay());
+      }, this.inputs.expansionDelay() * 1000);
     }
   }
 
@@ -236,7 +243,7 @@ export class MenuPattern<V> {
     this._openTimeout = setTimeout(() => {
       item.open();
       this._openTimeout = undefined;
-    }, this.inputs.expansionDelay());
+    }, this.inputs.expansionDelay() * 1000);
   }
 
   /** Handles mouseout events for the menu. */
@@ -445,6 +452,9 @@ export class MenuBarPattern<V> {
   /** Controls list behavior for the menu items. */
   listBehavior: List<MenuItemPattern<V>, V>;
 
+  /** The tab index of the menu. */
+  tabIndex = () => this.listBehavior.tabIndex();
+
   /** The key used to navigate to the next item. */
   private _nextKey = computed(() => {
     return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
@@ -467,6 +477,9 @@ export class MenuBarPattern<V> {
   /** Whether the menubar has been focused. */
   hasBeenFocused = signal(false);
 
+  /** Whether the menubar is disabled. */
+  disabled = () => this.inputs.disabled();
+
   /** Handles keyboard events for the menu. */
   keydownManager = computed(() => {
     return new KeyboardEventManager()
@@ -482,7 +495,7 @@ export class MenuBarPattern<V> {
   });
 
   constructor(readonly inputs: MenuBarInputs<V>) {
-    this.listBehavior = new List<MenuItemPattern<V>, V>({...inputs, disabled: () => false});
+    this.listBehavior = new List<MenuItemPattern<V>, V>(inputs);
   }
 
   /** Sets the default state for the menubar. */
@@ -598,6 +611,9 @@ export class MenuTriggerPattern<V> {
   /** The tab index of the menu trigger. */
   tabIndex = computed(() => (this.expanded() && this.menu()?.inputs.activeItem() ? -1 : 0));
 
+  /** Whether the menu trigger is disabled. */
+  disabled = () => this.inputs.disabled();
+
   /** Handles keyboard events for the menu trigger. */
   keydownManager = computed(() => {
     return new KeyboardEventManager()
@@ -614,12 +630,16 @@ export class MenuTriggerPattern<V> {
 
   /** Handles keyboard events for the menu trigger. */
   onKeydown(event: KeyboardEvent) {
-    this.keydownManager().handle(event);
+    if (!this.inputs.disabled()) {
+      this.keydownManager().handle(event);
+    }
   }
 
   /** Handles click events for the menu trigger. */
   onClick() {
-    this.expanded() ? this.close() : this.open({first: true});
+    if (!this.inputs.disabled()) {
+      this.expanded() ? this.close() : this.open({first: true});
+    }
   }
 
   /** Handles focusin events for the menu trigger. */
@@ -681,7 +701,7 @@ export class MenuItemPattern<V> implements ListItem<V> {
   id: SignalLike<string>;
 
   /** Whether the menu item is disabled. */
-  disabled: SignalLike<boolean>;
+  disabled = () => this.inputs.parent()?.disabled() || this.inputs.disabled();
 
   /** The search term for the menu item. */
   searchTerm: SignalLike<string>;
@@ -731,14 +751,17 @@ export class MenuItemPattern<V> implements ListItem<V> {
     this.id = inputs.id;
     this.value = inputs.value;
     this.element = inputs.element;
-    this.disabled = inputs.disabled;
     this.submenu = this.inputs.submenu;
     this.searchTerm = inputs.searchTerm;
     this.selectable = computed(() => !this.submenu());
   }
 
   /** Opens the submenu. */
   open(opts?: {first?: boolean; last?: boolean}) {
+    if (this.disabled()) {
+      return;
+    }
+
     this._expanded.set(true);
 
     if (opts?.first) {

src/components-examples/aria/menu/index.ts

@@ -1,5 +1,8 @@
 export {MenuBarExample} from './menu-bar/menu-bar-example';
 export {MenuBarRTLExample} from './menu-bar-rtl/menu-bar-rtl-example';
+export {MenuBarDisabledExample} from './menu-bar-disabled/menu-bar-disabled-example';
 export {MenuContextExample} from './menu-context/menu-context-example';
 export {MenuTriggerExample} from './menu-trigger/menu-trigger-example';
+export {MenuTriggerDisabledExample} from './menu-trigger-disabled/menu-trigger-disabled-example';
 export {MenuStandaloneExample} from './menu-standalone/menu-standalone-example';
+export {MenuStandaloneDisabledExample} from './menu-standalone-disabled/menu-standalone-disabled-example';