carbon
carbon copied to clipboard
feat(button, button-minor, button-toggle-group): add support for aria-labelledby and aria-describedby (FE-6364)
fixes #6567
Proposed behaviour
- Add support for
aria-labelledby
andaria-describedby
forButton
andButtonMinor
- Add support for
aria-describedby
forButtonToggleGroup
- accessible description is set on each toggle button inside the group (as recommended by this source). - Simplify
Button
tests - Update copyright dates
Current behaviour
- Accessible description cannot be set on
Button
orButtonMinor
.[^1] - Accessible description cannot be set on
ButtonToggleGroup
- Copyright dates in README and licence are outdated
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] 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.ts
file added or updated if required - [x] Related docs have been updated if required
QA
- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required
Testing instructions
Test with the following screen readers: macOS VoiceOver (with Safari) and NVDA (with Chrome and Firefox).
-
For
Button
:- Open the test story "With External Labels".
- With a screen reader active, focus on the button.
- Verify if the accessible name "Add Product Addon" and description "You will not be charged until you checkout" are both read out.
-
For
ButtonMinor
:- Open the test story "With External Labels".
- With a screen reader active, focus on the button.
- Verify if the accessible name "Add Product Addon" and description "You will not be charged until you checkout" are both read out.
-
For
ButtonToggle
:- Open the story "with inputHint".
- With a screen reader active, focus on any of the three toggle buttons.
- Verify if the accessible name "inputHint example" and description "Hint text" are both read out.
[^1]: Possible to pass any HTML button attribute as a prop, but TypeScript throws an error as they're not officially part of either component's interfaces. https://github.com/Sage/carbon/blob/d0524b57701c790429dfa7e50361897e3841f552/src/components/button/button.component.tsx#L320