Skip to content

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

Open
@jelbourn

Description

@jelbourn

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P2The issue is important to a large percentage of users, with a workaroundarea: material/button-togglefeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions