carbon icon indicating copy to clipboard operation
carbon copied to clipboard

fix(menu-fullscreen): ensure menu has aria properties required for dialogs (FE-5568)

Open Parsium opened this issue 11 months ago • 0 comments

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

  1. In storybook docs, open "fullscreen menu" test story for Menu
  2. 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).

  1. In storybook docs, open "fullscreen view" story for Menu
  2. Set width of browser viewport to below 1200px to render the fullscreen layout
  3. Trigger any one of the Menu buttons
  4. Verify screen reader announces a dialog has been opened, along with its accessible name

Parsium avatar Feb 27 '24 09:02 Parsium