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
- -
- -
Undo
-
Redo
-
-
- -
View
- -
- -
Zoom In
-
Zoom Out
-
Full Screen
-
-
- -
Help
- -
- -
Documentation
-
About
-
-
-
+
+
File
+
Edit
+ +
+ +
Undo
+
Redo
+
+
+ +
View
+ +
+ +
Zoom In
+
Zoom Out
+
Full Screen
+
+
+ +
Help
+ +
+ +
Documentation
+
About
+
+
+
`, imports: [Menu, MenuBar, MenuItem, MenuContent], changeDetection: ChangeDetectionStrategy.Eager,