search

reach / reach-ui

The Accessible Foundation for React Apps and Design Systems
https://reacttraining.com/reach-ui/
MIT License
5.97k stars 559 forks source link

[Tabs] Focus doesn't go into the tabs pannel first #456

Closed csenio closed 4 years ago

csenio commented 4 years ago

🐛 Bug report

Current Behavior

When there are focusable elements in the TabPanel they don't receive focus first when tab is pressed. Current order looks like this: (the red arrows signify where the focus goes when the user presses tab)

incorrect order

Expected behavior

Focusable elements in the TabPanel should receive focus first, like this

correct order

Reproducible example

https://codesandbox.io/s/reach-tabs-test-sz2ey

Your environment

Software Name(s) Version
Reach Package tabs 0.8.0
React 16.12
Browser chrome
Assistive tech - -
Node 10
npm/yarn yarn
Operating System linux
chaance commented 4 years ago

I'm not 100% sure here. As I read the keybaord guidance in the WAI-ARIA guidelines:

When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.

The last bit seems to back up your assertion, but it also assumes that the next element in the tab sequence is the tab panel. In your example that isn't the case, as the input comes next in the tab sequence. If we were to bypass the natural sequence order, how would one then navigate to the input in your example?

csenio commented 4 years ago

After playing around with it and looking at some other examples I believe the best option is to keep the markup in their natural order and then just position the submenu via CSS, like this: https://codesandbox.io/s/reach-tabs-test-u05vq

Perhaps we could add an example of this to the docs and add a section on focus order as I feel like these types of menus are quite common and making them accessible isn't very straight forward.

chaance commented 4 years ago

I'm a little confused by your example. Are you creating a menu with tabs?

csenio commented 4 years ago

yes, one of these big ecommerce menus like https://www.asos.com/women/ .

chaance commented 4 years ago

This is not a correct usage of tabs and should be avoided. Take a look at the menubar role instead. Here's a simplified implementation that you can use for guidance in building a React component that better suits your needs. https://dequeuniversity.com/library/aria/menus/megamenu