Tab stops on the last arrow navigation group

Open
#220 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript

Research direction

Start by reproducing the behavior in the linked deployed CodeSandbox example, then read the useArrowNavigationGroup and useFocusableGroup hooks mentioned in the issue. Trace how tabbing is handled when only arrow-navigable groups exist, including fullscreen mode. Done means tabbing leaves the group to browser controls or cycles through the groups as described.

Written by the indexing model from the issue text.

Description

bug

When we only have arrow navigable groups, the tabbing stops at the last group. We expect it to go out to the browser controls, or in the fullscreen case, cycle back to the first navigable group.

In this example: https://codesandbox.io/s/blissful-http-9r31z0?file=/example.tsx if you keep tabbing, you can see that the tabbing stops at the last group of arrow navigable group. Note: you need to open the example page itself to see this happening: https://9r31z0.csb.app/

To extra clarify: when we are at fullscreen, we expect that the first tab goes to the first group, the second tab goes to the second group, the third goes back to the first group and so on. But currently, the third and subsequent tabs will just stay on the last group.

I've tried exploring the useArrowNavigationGroup and useFocusableGroup hooks to see if there is something there we can use to achieve this, but no success.

Is this a bug? Any suggestions?

Dominant language
TypeScript
Stars
165
Forks
42
Avg merge
1d 11h
Merged PRs (30d)
9

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/tabster

All issues in microsoft/tabster

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.