You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1st-gen/packages/menu/menu-item.md
+8Lines changed: 8 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -308,6 +308,14 @@ Note: While `sp-menu-item` can accommodate any custom content in the `submenu` s
308
308
309
309
Review the accessibility guidelines for the parent [menu](../menu#accessibility-guidelines) and [menu-group](../menu-group#accessibility-guidelines).
310
310
311
+
#### Roles and ARIA attributes
312
+
313
+
When a menu item with `role="menuitem"` is selected, the `aria-current="true"` attribute is automatically applied to indicate the current item to screen reader users. This ensures assistive technology properly announces the selected state of menu items.
314
+
315
+
Menu items with `role="menuitemradio"` or `role="menuitemcheckbox"` use `aria-checked` instead of `aria-current` to communicate their selection state.
316
+
317
+
Menu items with `role="option"` (used when the parent `<sp-menu>` has `role="listbox"`) use `aria-selected` to communicate their selection state. This pattern is commonly used in components like `<sp-picker>` where the menu functions as a selection list rather than a navigation menu.
318
+
311
319
#### Include a label
312
320
313
321
Either place visible text in the component's slot or use `label` attribute to ensure menu items can be read by assistive technology.
0 commit comments