search

square / maker

Maker Design System by Square
https://square.github.io/maker/styleguide/latest-stable/
Other
63 stars 14 forks source link

fix(Stepper): add "+, -" aria-labels #552

Closed ashjtan closed 1 year ago

ashjtan commented 1 year ago

Describe the problem this PR addresses

Stepper's plus and minus buttons are only described as "button" on screenreader, making it difficult to distinguish between the two and know what they do.

Describe the changes in this PR

Added aria-label to the plus and minus buttons on the Stepper.

Mac VoiceOver reads out as "plus, minus":

https://github.com/square/maker/assets/20190589/1fde59dd-1dbc-4add-8c7f-d30206a7ef27

Considered alternatives

  1. adding screenreader labels on the icon level While this is something that could be considered in the future to optionally be included by screenreaders, I don't think that all icons, being used as just icons, need to be read out. However, in this case, the icon was being used as the label for a button on the stepper, not just a decorative icon. It's also a much lower-effort addition, since the icon usage here is hard-coded.
  2. using the words "plus, minus" vs "+, -" I decided to just use the characters to allow the label to be read in other languages. They're also the most accurate to what the icons are.
github-actions[bot] commented 1 year ago

Deployed Styleguide and Lab.

Notes
  1. Links may take a few minutes to update after PR is opened or commit is pushed.
  2. Links may become invalidated after PR is merged or closed.
  3. Links for all releases and open PRs can be found on the Maker Deploys page.

github-actions[bot] commented 1 year ago

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

The release is available on:

Your semantic-release bot :package::rocket: