Description
MatButtonToggle
and MatButtonToggleGroup
previously use either a native checkbox or a radio button depending on whether the control had multiple selection. We changed this to always using a native <button>
element with aria-pressed
partially based on this article by Heydon Pickering.
I was recently given some feedback from a from a screen-reader user that, while button[aria-pressed]
and checkbox are effectively interchangeable, using the radio-button interaction pattern is preferable for single-selection in a lot of cases. As such, we should re-add support for the radio-button pattern. I'm imagining we can do this similarly to how we support multiple interaction pattern in other components (e.g. list, chips) via selector, potentially something like
<mat-button-toggle-radio-group aria-label="Text alignment">
<mat-button-toggle-radio>Left</mat-button-toggle-radio>
<mat-button-toggle-radio>Center</mat-button-toggle-radio>
<mat-button-toggle-radio>Right</mat-button-toggle-radio>
</mat-button-toggle-radio-group>
This variant should use a native <input type="radio">
in its template so that we get the correct keyboard interaction for free.