carbon
carbon copied to clipboard
fix(menu-fullscreen): ensure menu has aria properties required for dialogs (FE-5568)
closes #5631
Proposed behaviour
For MenuFullscreen
:
- To the root container, add all ARIA properties that are required for dialogs (source for details)
- Add translation key
menuFullscreen.ariaLabels.closeButton
, which is used for the close button's accessible name - Fix typing of
onClose
prop
Current behaviour
-
MenuFullscreen
is designed to act like a dialog, but it is not recognised as one by screen readers due to missing ARIA properties.
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
Additional context
Testing instructions
Opening and closing transitions
- In storybook docs, open "fullscreen menu" test story for
Menu
- For all
startPosition
prop values, verify no visual regressions have been introduced to opening and closing animations.
Screen reader behaviour
Test with the following screen readers: macOS VoiceOver (with Safari) and NVDA (with Chrome and Firefox).
- In storybook docs, open "fullscreen view" story for
Menu
- Set width of browser viewport to below 1200px to render the fullscreen layout
- Trigger any one of the
Menu
buttons - Verify screen reader announces a dialog has been opened, along with its accessible name