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.
MatButtonToggleandMatButtonToggleGrouppreviously 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 witharia-pressedpartially 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 likeThis variant should use a native
<input type="radio">in its template so that we get the correct keyboard interaction for free.