components icon indicating copy to clipboard operation
components copied to clipboard

feat(button-toggle): Add support for radio-button interaction pattern

Open jelbourn opened this issue 5 years ago • 2 comments

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.

jelbourn avatar Aug 04 '20 18:08 jelbourn

Looks like the MDC's button toggle will use the radio pattern for single-select toggle groups, so this will probably just be fixed by default when switching to MDC.

jelbourn avatar Aug 04 '20 18:08 jelbourn

Removing 'Fixed in MDC' label since the buttons still only rely on aria-pressed and do not use a native input

amysorto avatar May 07 '24 15:05 amysorto