carbon
carbon copied to clipboard
feat: accessibility improvements to ActionPopover, SplitButton and MultiActionButton
Proposed behaviour
- ActionPopover, SplitButton and MultiActionButton should not use the
menuandmenuitemroles, but simply present buttons in a semantic HTML list - the consumer should be able to override the
aria-labelattribute for the main button on ActionPopover should - no
aria-labelshould be placed on menu items that open a submenu, so that screenreaders read the text of the item rather than a vague word like "actions"
Current behaviour
- ActionPopover, SplitButton and MultiActionButton use ARIA menu roles, which are not semantically appropriate for a simple list of actions/buttons
- It is not possible to override the
aria-labelof "actions" on the main button for ActionPopover, which may lead to a poor experience for users (potentially many duplicate labels on a page, none of them meaningful for what the component is actually used for) - There is the same
aria-label="actions"on each menu item that opens a submenu, which causes screenreaders to announce the item as "actions" rather than the actual text that a sighted user can read
Checklist
- [X] Commits follow our style guide
- [X] Related issues linked in commit messages if required
- [X] Screenshots are included in the PR if useful
- [X] All themes are supported if required
- [X] Unit tests added or updated if required
- [X] Cypress automation tests added or updated if required
- [X] Playwright automation tests added or updated if required
- [X] Storybook added or updated if required
- [X] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [X] Typescript
d.tsfile added or updated if required - [X] Related docs have been updated if required
QA
- [ ] Tested in CodeSandbox/storybook
- [ ] Add new Cypress test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required
Additional context
Testing instructions
NOTE: marked as requiring UX QA, this is for an accessibility review rather than more general UX. (Nothing should have changed for users who don't use assistive technology.)
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 5895f1cbcc94d6c564d3baa9029ab9c142f84b4e:
| Sandbox | Source |
|---|---|
| carbon-quickstart | Configuration |
| carbon-quickstart-typescript | Configuration |
| carbon-quickstart | PR |
Did a demo with @tempertemper and update is good.
:tada: This PR is included in version 127.1.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: