You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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: