Incorrect keyboard interaction with ToggleButtonGroup type="radio"

[IronsUK]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

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

[shashi2290]

@IronsUK

• fixed arrow movement in checkbox group
• fixed tab navogation for radio button group

[cprajzner]

this fixed the example code, but is there going to be a fix to the underlying issue so the example code is not needed