Skip to content

Segmented: add support for name prop to enable grouping #51698

@ssoft-auky

Description

@ssoft-auky

What problem does this feature solve?

Add support for name prop to enable grouping in Segmented. (Just like Radio)

Currently when passing name prop to Segmented, it only applies to the container div but is not passed to the input[type="radio"] children within.
Without name prop to group the radio inputs, keyboard accessibility is currently impacted like below:

  • Chrome/Edge: When using arrow keys, options can jump to another Segmented within the same page
  • Firefox: Arrow keys unusable, Tab + Space keys needed to select options (which is not obvious to user as no visual indicator is present)

Also, for better keyboard a11y experience I suggest to add visual indicator (shadow/outline) for focused (:focus-visible) option. (Just like Radio)

What does the proposed API look like?

Add name attribute for children input in Segmented when name prop is set. (Just like Radio)

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedThe suggestion or request has been accepted, we need you to help us by sending a pull request.⌨️ Accessibility

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions