fix(aria/menu): Add label property for proper aria-label

Author: adolgachev

goldens/aria/menu/index.api.md

@@ -73,14 +73,15 @@ export class MenuItem<V> {
     readonly expanded: _angular_core.Signal<boolean | null>;
     readonly hasPopup: _angular_core.Signal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | null>;
     open(): void;
     readonly parent: Menu<V> | MenuBar<V> | null;
     readonly _pattern: MenuItemPattern<V>;
     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; }; "label": { "alias": "label"; "required": false; "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>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuItem<any>, never>;
 }

src/aria/menu/menu-item.ts

@@ -38,6 +38,7 @@ import type {MenuBar} from './menu-bar';
     '(focusin)': '_pattern.onFocusIn()',
     '[attr.tabindex]': '_pattern.tabIndex()',
     '[attr.data-active]': 'active()',
+    '[attr.aria-label]': 'label() || value()',
     '[attr.aria-haspopup]': 'hasPopup()',
     '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-disabled]': '_pattern.disabled()',
@@ -54,9 +55,12 @@ export class MenuItem<V> {
   /** The unique ID of the menu item. */
   readonly id = input(inject(_IdGenerator).getId('ng-menu-item-', true));
 
-  /** The value of the menu item. */
+  /** The value of the menu item, used as the default aria-label */
   readonly value = input.required<V>();
 
+  /** The label for the menu item, used as the aria-label. */
+  readonly label = input<string | null>(null);
+
   /** Whether the menu item is disabled. */
   readonly disabled = input<boolean>(false);
 

src/components-examples/aria/menubar/menubar/menubar-example.html

@@ -30,7 +30,7 @@
           <span class="example-shortcut">⌘O</span>
         </div>
 
-        <div ngMenuItem value="Make a copy">
+        <div ngMenuItem label="Make a copy" value="copy">
           <span class="example-icon material-symbols-outlined" translate="no">file_copy</span>
           <span class="example-label">Make a copy</span>
         </div>