wave
wave copied to clipboard
Tabs are not accessible with Keyboard
-
@freenow/wave
version: 1.0.7
Relevant code
<TabBar>
<TabBar.Link
onClick={() => setCurrentTab(tabs.get("online"))}
selected={currentTab === tabs.get("online")}
>
Online (10)
</TabBar.Link>
<TabBar.Link
onClick={() => setCurrentTab(tabs.get("offline"))}
selected={currentTab === tabs.get("offline")}
>
Offline (20)
</TabBar.Link>
</TabBar>
What you did
Testing the keyboard a11y of my application I realize I can't focus on tabs
Reproduction
https://www.loom.com/share/b10da983dcfe423aa8a822e436827dc2 https://codesandbox.io/s/wave-playground-tabs-p8m72
Problem description
Tabs are interactive elements thus they should be reachable using the keyboard
It seems that if we pass <TabBar.Link as={Link}
it will work but:
- The focus outline gets cropped
- It actually makes sense to say to a "Link" component to render as "Link"?
Image of the tabs being accessible with Keyboard but with outline cropped
There are WAI-ARIA recommendations on how the TabBar should behave with the keyboard.