-
- Notifications
You must be signed in to change notification settings - Fork 53.8k
Closed
react-component/segmented
#284Closed
Copy link
Labels
help wantedThe suggestion or request has been accepted, we need you to help us by sending a pull request.The suggestion or request has been accepted, we need you to help us by sending a pull request.⌨️ Accessibility
Description
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
Labels
help wantedThe suggestion or request has been accepted, we need you to help us by sending a pull request.The suggestion or request has been accepted, we need you to help us by sending a pull request.⌨️ Accessibility