contentful / forma-36

Discussed in https://github.com/contentful/forma-36/discussions/1160

^{Originally posted by thebesson August 6, 2021}

The problem

Currently Tabs component is responsible for implementing both "Tabs" and "Navigation" patterns. This adds complexity to the implementation and makes implementing a11y patterns challenging. See:

forma-36/packages/components/tabs/src/Tabs.tsx

Line 31 in c2abf54

if (role === 'navigation') {

The proposed solution

I propose to separate the logic into two components.

Remove all logic for navigation in the Tabs component: tabs are buttons, not links.
Introduce a new component Navigation or NavigationPanel with NavigationTab or NavigationItem, which will implement nav tag with links, and the forma-36 styling, without additional logic.
Add conventional keyboard navigation pattern for Tabs: https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

Navigation

<Navigation` variant=''horizontal-divider">
    <NavigationItem href="https://some.link">Some link</NavigationItem>
    <NavigationItem href="https://some.link">Some link</NavigationItem>
</Navigation>

before

<Tabs role="tablist">...</Tabs>
<Tabs role="navigation">...</Tabs>

after

<Tabs>...</Tabs>
<Navigation>...</Navigation>

Breaking changes

v4

Proposal - introduce Navigation component