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()',
@@ -57,6 +58,9 @@ export class MenuItem<V> {
   /** The value of the menu item. */
   readonly value = input.required<V>();
 
+  /** The label for the menu item. */
+  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

@@ -18,7 +18,7 @@
   >
     <div ngMenu #fileMenu="ngMenu">
       <ng-template ngMenuContent>
-        <div ngMenuItem value="New">
+        <div ngMenuItem value="New" label="New Article">
           <span class="example-icon material-symbols-outlined" translate="no">article</span>
           <span class="example-label">New</span>
           <span class="example-shortcut">⌘N</span>
@@ -37,7 +37,7 @@
 
         <div role="separator" class="example-separator"></div>
 
-        <div ngMenuItem #shareEl value="Share" [submenu]="shareMenu()">
+        <div ngMenuItem #shareEl value="Share" [submenu]="shareMenu()" aria-label="Share">
           <span class="example-icon material-symbols-outlined" translate="no">person_add</span>
           <span class="example-label">Share</span>
           <span class="example-icon example-arrow material-symbols-outlined" translate="no">arrow_right</span>