diff --git a/src/pages/components/menu-buttons/accessibility.mdx b/src/pages/components/menu-buttons/accessibility.mdx index d59f6515a2d..39227a182e5 100644 --- a/src/pages/components/menu-buttons/accessibility.mdx +++ b/src/pages/components/menu-buttons/accessibility.mdx @@ -27,7 +27,7 @@ incorporates accessibility. ## What Carbon provides Carbon bakes keyboard operation into its components, improving the experience of -blind users and others who operate via keyboard. Carbon also incorporates other +blind users and others who operate via keyboard. Carbon incorporates other accessibility considerations, some of which are described below. ### Keyboard interaction diff --git a/src/pages/components/menu/accessibility.mdx b/src/pages/components/menu/accessibility.mdx index de6707f853e..5178f7b93d1 100644 --- a/src/pages/components/menu/accessibility.mdx +++ b/src/pages/components/menu/accessibility.mdx @@ -6,10 +6,85 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] import A11yStatus from 'components/A11yStatus'; - + -**Coming soon!** This page is a work in progress. +No accessibility annotations are needed for menus, but keep these considerations +in mind if you are modifying Carbon or creating a custom component. - + + + + +What Carbon provides +Development considerations + + + +## What Carbon provides + +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via keyboard. Carbon incorporates many other +accessibility considerations, some of which are described below. + +### Keyboard interaction + +The menu is reached by `Tab`. When the menu is open, the first item takes focus. +Use the `Up` and `Down` arrow keys to navigate between menu items. + + + + + +![example of menu keyboard interaction](images/accessibility-menu-1.png) + + + Menu is reached by Tab and when opened, the first menu item takes focus. Arrow + keys move focus. + + + + + +Pressing `Space` or `Enter` on a focused menu item activates it and collapses +the menu. Pressing `Space` or `Enter` on a submenu opens it. A submenu can also +be opened and closed using the right and left arrow keys respectively. When the +menu or submenu is open, the first item takes focus. An activated menu item can +have different results depending on its functionality. If the item is a link, it +launches the selection. If the item is selectable, it selects or deselects the +item. The menu item retains its selected or unselected state when the menu is +opened again. + + + + +![example of menu keyboard interaction](images/accessibility-menu-2.png) + + + Space and Enter keys activates, selects, or deselects the menu item with + focus. A submenu is opened and closed with the right and left arrow keys + respectively. + + + + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component. + +- Each menu, including nested menus, are `ul` elements with `role="menu"`. +- Menu items are `li` elements with `role="menuitem"`. +- If a Menu item contains a sub-menu, it is given `aria-haspopup="true"` and + `aria-expanded` of true or false depending on if the sub-menu is open/visible. +- Selectable menu items are given `role="menuitemcheckbox"`. +- Menu item groups are `li` elements with `role="group"`. +- Menu item radio groups get `role="menuitemradio"`. +- Menu items with really long labels can get truncated depending on the screen + size. This label will be exposed by a browser rendered tooltip on hover or + focus. +- Menu implements the + [menu design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) + defined in the ARIA Authoring Practices Guide (APG). diff --git a/src/pages/components/menu/images/accessibility-menu-1.png b/src/pages/components/menu/images/accessibility-menu-1.png new file mode 100644 index 00000000000..fcd89f823b9 Binary files /dev/null and b/src/pages/components/menu/images/accessibility-menu-1.png differ diff --git a/src/pages/components/menu/images/accessibility-menu-2.png b/src/pages/components/menu/images/accessibility-menu-2.png new file mode 100644 index 00000000000..e32cb668daf Binary files /dev/null and b/src/pages/components/menu/images/accessibility-menu-2.png differ diff --git a/src/pages/components/menu/images/usage-menu-RTL.png b/src/pages/components/menu/images/usage-menu-RTL.png index 5702114790d..438b63beaab 100644 Binary files a/src/pages/components/menu/images/usage-menu-RTL.png and b/src/pages/components/menu/images/usage-menu-RTL.png differ diff --git a/src/pages/components/menu/images/usage-menu-overflow-truncate.png b/src/pages/components/menu/images/usage-menu-overflow-truncate.png index d374af83c5d..9cd6da84bf9 100644 Binary files a/src/pages/components/menu/images/usage-menu-overflow-truncate.png and b/src/pages/components/menu/images/usage-menu-overflow-truncate.png differ diff --git a/src/pages/components/menu/usage.mdx b/src/pages/components/menu/usage.mdx index cfb5b060f17..a7c55ad0d91 100644 --- a/src/pages/components/menu/usage.mdx +++ b/src/pages/components/menu/usage.mdx @@ -328,7 +328,8 @@ including the direction of the caret and keyboard shortcuts. #### Overflow Consider using short and precise labels for menu items. However, when deciding -to truncate long menu items, use a tooltip on hover to reveal the full text. +to truncate long menu items, a browser rendered title tooltip will reveal the +full text on hover.