microsoft / tabster

Web Application Keyboard Navigation Tools
https://tabster.io
MIT License
118 stars 36 forks source link

Tabster should move focus to the selected `radio` item in a group #342

Open behowell opened 8 months ago

behowell commented 8 months ago

Expected Behavior

When tabster moves focus programatically to a radio group, it should move focus to the selected item.

In this case, a radio group is defined as a collection of <input type="radio"> that have the same name attribute. It's not necessarily inside a <div role="radiogroup">, or inside a <RadioGroup> component.

Observed Behavior

Tabster moves focus to the first radio item, even if another one is selected.

Repro

https://codesandbox.io/s/86p2ck?file=/example.tsx

Tip: use the keyboard to open the dialog so the focus outline is visible.

Related

This is similar to #144, but this issue is not specifically related to useFocusableGroup.

Fixing this issue in tabster will fix part 2 of https://github.com/microsoft/fluentui/issues/28438 affecting FluentUI's RadioGroup.

miroslavstastny commented 2 months ago

Should be done in tabster 8.0. @layershifter / @mshoho please verify and close