-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Incorrect keyboard interaction with ToggleButtonGroup type="radio" #6719
Labels
Comments
|
this fixed the example code, but is there going to be a fix to the underlying issue so the example code is not needed |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Describe the bug
I don't think ToggleButtons should render a label element with tabindex="0" when the parent ToggleButtonGroup has the type="radio" prop. It causes tab to focus on the labels without being useful to select them via keyboard interaction.
Expected behavior
When the ToggleButtonGroup is set up as a radio group, the group should be reachable by tab but the individual labels should not. Tab should take the focus out of the entire group as per standard radio functionality.
To Reproduce
In the example, tab to the button group, notice that you can use the keyboard arrow keys to change the selected value.
Tab again and the focus goes to the first label. Subsequent tabs focus on the next labels. However, the selected value doesn't change and you can't select it with a keyboard press.
Reproducible Example
https://codesandbox.io/s/nice-fog-2y88cm?file=/src/App.js
Screenshots
No response
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of React-Bootstrap are you using?
2.9.1
What version of Bootstrap are you using?
5.3.1
Additional context
No response
The text was updated successfully, but these errors were encountered: