diff --git a/goldens/aria/menu/index.api.md b/goldens/aria/menu/index.api.md index fde707a17ba2..9f21c688701d 100644 --- a/goldens/aria/menu/index.api.md +++ b/goldens/aria/menu/index.api.md @@ -73,6 +73,7 @@ export class MenuItem { readonly expanded: _angular_core.Signal; readonly hasPopup: _angular_core.Signal; readonly id: _angular_core.InputSignal; + readonly label: _angular_core.InputSignal; open(): void; readonly parent: Menu | MenuBar | null; readonly _pattern: MenuItemPattern; @@ -80,7 +81,7 @@ export class MenuItem { readonly submenu: _angular_core.InputSignal | undefined>; readonly value: _angular_core.InputSignal; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[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, "[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, never>; } diff --git a/src/aria/menu/menu-item.ts b/src/aria/menu/menu-item.ts index 7fb9a83bf1ab..114d4c5b9293 100644 --- a/src/aria/menu/menu-item.ts +++ b/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 { /** 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(); + /** The label for the menu item, used as the aria-label. */ + readonly label = input(null); + /** Whether the menu item is disabled. */ readonly disabled = input(false); diff --git a/src/components-examples/aria/menubar/menubar/menubar-example.html b/src/components-examples/aria/menubar/menubar/menubar-example.html index 0648bb77890b..2bbf61dd4451 100644 --- a/src/components-examples/aria/menubar/menubar/menubar-example.html +++ b/src/components-examples/aria/menubar/menubar/menubar-example.html @@ -30,7 +30,7 @@ ⌘O -
+
file_copy Make a copy