angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.34k stars 6.74k forks source link

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

Open jelbourn opened 4 years ago

jelbourn commented 4 years ago

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 commented 4 years ago

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.

amysorto commented 5 months ago

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