diff --git a/src/aria/menu/menu-item.ts b/src/aria/menu/menu-item.ts
index 988f2def8487..6f85007e713a 100644
--- a/src/aria/menu/menu-item.ts
+++ b/src/aria/menu/menu-item.ts
@@ -31,7 +31,7 @@ import type {MenuBar} from './menu-bar';
*
* ```html
*
- *
Action Item
+ *
Action Item
*
Submenu Trigger
*
* ```
@@ -49,7 +49,6 @@ import type {MenuBar} from './menu-bar';
'(focusin)': '_pattern.onFocusIn()',
'[attr.tabindex]': '_pattern.tabIndex()',
'[attr.data-active]': 'active()',
- '[attr.aria-label]': 'value()',
'[attr.aria-haspopup]': 'hasPopup()',
'[attr.aria-expanded]': 'expanded()',
'[attr.aria-disabled]': '_pattern.disabled()',
@@ -66,7 +65,7 @@ export class MenuItem implements OnInit, OnDestroy {
/** The unique ID of the menu item. */
readonly id = input(inject(_IdGenerator).getId('ng-menu-item-', true));
- /** The value of the menu item, used as the default aria-label */
+ /** The value of the menu item. */
readonly value = input.required();
/** Whether the menu item is disabled. */
diff --git a/src/aria/menu/menu.spec.ts b/src/aria/menu/menu.spec.ts
index 603b00b0ff4b..eb9dc8d99081 100644
--- a/src/aria/menu/menu.spec.ts
+++ b/src/aria/menu/menu.spec.ts
@@ -478,7 +478,6 @@ describe('Standalone Menu Pattern', () => {
});
it('should not reset default state on hover triggers expansion', async () => {
- TestBed.configureTestingModule({});
fixture = TestBed.createComponent(StandaloneMenuExample);
fixture.detectChanges();
@@ -486,6 +485,18 @@ describe('Standalone Menu Pattern', () => {
await mouseover(berries!);
expect(berries?.getAttribute('data-active')).toBe('true');
});
+
+ it('should be able to set an aria-label on a menu item', async () => {
+ fixture = TestBed.createComponent(StandaloneMenuExample);
+ fixture.detectChanges();
+
+ const item = getItem('Apple');
+ expect(item?.getAttribute('aria-label')).toBeFalsy();
+
+ fixture.componentInstance.firstItemAriaLabel.set('Apple item label');
+ fixture.detectChanges();
+ expect(item?.getAttribute('aria-label')).toBe('Apple item label');
+ });
});
describe('Menu Trigger Pattern', () => {
@@ -1029,52 +1040,58 @@ describe('Menu Bar Pattern', () => {
@Component({
template: `
-
-
- Apple
- Banana
- Berries
-
-
+
- Blueberry
- Blackberry
- Strawberry
+ Apple
+ Banana
+ Berries
+
+
+
+ Blueberry
+ Blackberry
+ Strawberry
+
+
+
+ Cherry
-
-
Cherry
-
-
`,
imports: [Menu, MenuItem, MenuContent],
changeDetection: ChangeDetectionStrategy.Eager,
})
class StandaloneMenuExample {
+ firstItemAriaLabel = signal(null);
+
itemSelected(value: string) {}
}
@Component({
template: `
-
-
-
-
- Apple
- Banana
- Berries
+
-
+
- Blueberry
- Blackberry
- Strawberry
+ Apple
+ Banana
+ Berries
+
+
+
+ Blueberry
+ Blackberry
+ Strawberry
+
+
+
+ Cherry
-
-
Cherry
-
-
`,
imports: [Menu, MenuItem, MenuTrigger, MenuContent],
changeDetection: ChangeDetectionStrategy.Eager,
@@ -1085,36 +1102,36 @@ class MenuTriggerExample {
@Component({
template: `
-
-
File
-
Edit
-
-
-
-
View
-
-
-
- Zoom In
- Zoom Out
- Full Screen
-
-
-
-
Help
-
-
-
- Documentation
- About
-
-
-
+
+
File
+
Edit
+
+
+
+
View
+
+
+
+ Zoom In
+ Zoom Out
+ Full Screen
+
+
+
+
Help
+
+
+
+ Documentation
+ About
+
+
+
`,
imports: [Menu, MenuBar, MenuItem, MenuContent],
changeDetection: ChangeDetectionStrategy.Eager,