Incorrect keyboard interaction with ToggleButtonGroup type="radio"

Open

#6,719 opened on Nov 1, 2023 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 3/5
Estimated time: 1-2 days
Newbie friendliness: 45/100

Issue type: Bug
Clarity: Mostly clear
Activity status: Stale
Tech stack: bootstrap, javascript, react, typescript
Domain: accessibility, frontend

Research direction

Start by reproducing the issue in the linked CodeSandbox and inspect the ToggleButtonGroup entry point, focusing on the type="radio" behavior. Done means the group remains keyboard reachable, individual labels are skipped by Tab, and arrow-key selection still works without the labels receiving focus.

Written by the indexing model from the issue text.

Description

bug

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