Skip to content

Commit 7b19176

Browse files
docs(menu-item): adds roles and aria documentation
1 parent 48e75ff commit 7b19176

File tree

1 file changed

+8
-0
lines changed

1 file changed

+8
-0
lines changed

1st-gen/packages/menu/menu-item.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,14 @@ Note: While `sp-menu-item` can accommodate any custom content in the `submenu` s
308308

309309
Review the accessibility guidelines for the parent [menu](../menu#accessibility-guidelines) and [menu-group](../menu-group#accessibility-guidelines).
310310

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+
311319
#### Include a label
312320

313321
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

Comments
 (0)