Solution

Implementing a basic (not fully accessible) Tabs component in Vue is quite simple due to the fact that only one state value is needed, the currently active tab item. Vue also helps to keep the state and the UI in sync, which is more troublesome to do so in Vanilla JavaScript.

Props (API Design)

Part of the complexity of building a component is designing the API for it. In the case of Vue, it would be the props of the component. At the bare minimum, we will need the following props:

• items: A list of item objects. Each item is an object with the fields:
  • value: A unique identifier for the tab item.
  • label: The text label to show in the tab item.
  • panel: The contents to show in the tab panel when the item is active.
• defaultValue: The default tab item/panel to show. In case the defaultValue is not provided, we'll use the first item as the value. This is assuming that items is non-empty.

Test Cases

• All the provided items should be displayed.
• The default active item should be reflected correctly.
• Selecting the tab items updates the tabpanel's contents with the active tabs's panel details.
• Test that you are able to initialize multiple instances of the component, each with independent states.

Accessibility

Accessibility is an important factor for making good Tabs components. The ARIA Authoring Practices Guide for Tabs has a long list of guidelines for the ARIA roles, states, and properties to add to the various elements of a Tab. Tabs II and Tabs III will focus on improving the accessibility of Tabs component.

Resources

• Tabs Patterns | ARIA Authoring Practices Guide
• Tabs – Radix Primitives
• Tabs – React Aria
• Tabs - Headless UI
• Tab – Ariakit
• Tabs | Reach UI