Summary 💡

I'm opening this issue as a continuation of discussion that was initiated in #17187.

ToggleButton and ToggleButtonGroup elements should be marked with appropriate role and aria attributes depending on their usage.

Copying part of my comment from #17187, this is what I envision:

• ToggleButtonGroup exclusive selection:
  • ToggleButtonGroup has role="group" and aria-label="......" attributes
  • ToggleButtons have role="menuitemradio", aria-checked="true/false", and maybe aria-label attributes.
• ToggleButtonGroup multiple selection:
  • ToggleButtonGroup has role="group" and aria-label="......" attributes
  • ToggleButtons have role="menuitemcheckbox", aria-checked="true/false", and, if necessary, aria-label="...." attributes
• Standalone ToggleButton:
  • ToggleButton has role="button", aria-pressed="true/false", and maybe aria-label.

It would be great if somebody with more experience in accessibility could chime in.

Examples 🌈

A reference example: http://jongund.github.io/oaa-examples/examples/menubar/menubar-2/menubar-2.html (Jon Gunderson does a lot of work on W3C Aria Practices. I'd consider him a reliable source.)

FWIW, Angular Material's example uses role="group" on their ToggleButtonGroup and role="button" on their ToggleButtons. Their docs only have an example of exclusive selection though. I haven't bothered seeing what they do in a multiple selection scenario, though they describe it: https://material.angular.io/components/button-toggle/overview#accessibility

https://www.w3.org/WAI/PF/aria/roles

Motivation 🔦

Improve accessibility.