[A11y] Fix keyboard navigation for Tabline, TabPanel and Pills
Closed this issue · 2 comments
j-mnizhek commented
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
- 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. - Pills now have a
behavior
property (with valuesradio
andtabs
) 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 theTab
key.
Everything is discussable, so if you have questions, you know where to find me 😁
ilyabrower commented
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.
j-mnizhek commented
And also, both TabLine and TabPanel should have the same keyboard navigation through items — with arrows, not with Tab
.