microsoft / tabster

Web Application Keyboard Navigation Tools

Home Page:https://tabster.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tab stops on the last arrow navigation group

rdossantos2531 opened this issue · comments

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?

@ling1726 Hi! Did you have a chance to investigate this? Any suggestions?

@ling1726 Hey! Gently ping. Just wanted to know if there has been any news or any insights about this. Thanks!

@rdossantos2531 I can't repro what you have described in this issue. When I open your sandbox https://9r31z0.csb.app/ I can see that tab moves to the browser window after tabbing from the last group

@ling1726 I tested on Edge Windows, Edge on MacOS, Safari on MacOS. I repo the bug. Tab control does not return to browser window when using tab after last tabster element. When using shift tab, it returns properly.
image

I just started to repro it now, we will look into this

@ling1726 Hi! Do you have any estimates on this? Not trying to rush, just really wanted to know if we have an estimate. Thanks!

@rdossantos2531 I've been trying the repro and I've noticed something interesting. If you hit the full page example directly https://9r31z0.csb.app/ it's reproable because the Open in Sandbox button is actually an iframe. Tabster finds this iframe and ignores it.

However if you open the codesandbox and open the full page view from there this button is not displayed and I can tab through without any problems.

@ling1726 Oh, interesting! Good to know that.

But our scenario, though, is related to fullscreen. Go to full page view, as you described, and click the last button. You'll get to fullscreen.
image

From there you can try tabbing, and you'll notice that after tabbing to the last element, if we tab again, the focus just stays there. We wanted to know if there is a way to make the tab cycle around back to the first group of elements. It is an accessibility concern for us that we make the tabbing cycle around when in full screen. Any thoughts?