Tabs are not accessible with Keyboard

[duranmla]

• @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

[duranmla]

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

[nlopin]

There are WAI-ARIA recommendations on how the TabBar should behave with the keyboard.