semrush/intergalactic

[A11y] Fix keyboard navigation for Tabline, TabPanel and Pills

Closed this issue · 2 comments

Is your feature request related to a problem? Please describe.

We need to add some possibilities and unify a little bit keyboard control for Tabline, TabPanel and Pills to make them more unified for users.

Describe the solution you'd like

  1. In TabLine and TabPanel, now you can navigate through tabs/items using arrow keys. Currently, they switch automatically, but we definitely need the ability to activate a tab using Enter/Space. This is necessary so that users don't exceed limits in some cases, and heavy content doesn't suddenly load on the page.
  2. Pills now have a behavior property (with values radio and tabs) that determines how Pills behave. For Pills, we need to adjust keyboard control for the tabs behavior: we need to remove the ability to navigate through items with the Tab key.

Everything is discussable, so if you have questions, you know where to find me 😁

For TabLine and TabPanel add prop behavior with values auto or manual.
For Pills add new values for behavior - auto for old radio, manual for old tabs and mark radio and tabs as deprecated.

And also, both TabLine and TabPanel should have the same keyboard navigation through items — with arrows, not with Tab.