carbon icon indicating copy to clipboard operation
carbon copied to clipboard

feat: accessibility improvements to ActionPopover, SplitButton and MultiActionButton

Open robinzigmond opened this issue 1 year ago • 1 comments
trafficstars

Proposed behaviour

  • ActionPopover, SplitButton and MultiActionButton should not use the menu and menuitem roles, but simply present buttons in a semantic HTML list
  • the consumer should be able to override the aria-label attribute for the main button on ActionPopover should
  • no aria-label should 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-label of "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.ts file 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.)

robinzigmond avatar Jan 30 '24 08:01 robinzigmond

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

codesandbox-ci[bot] avatar Jan 30 '24 08:01 codesandbox-ci[bot]

Did a demo with @tempertemper and update is good.

harpalsingh avatar Mar 08 '24 09:03 harpalsingh

:tada: This PR is included in version 127.1.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

carbonci avatar Mar 28 '24 10:03 carbonci