Building Accessible Tabs Components in React

Tabs components look deceptively simple. In practice, they're frequent accessibility failures in enterprise React applications, requiring careful attention to keyboard navigation, focus management, and ARIA attributes.

The Implementation Pattern

This approach uses a compound component pattern that mirrors headless UI libraries:

<Tabs>
  <TabList>
    <Tab />
  </TabList>
  <PanelList>
    <TabPanel />
  </PanelList>
</Tabs>

The pattern keeps the API expressive while avoiding prop drilling. It's the same architecture used by Material UI and Carbon Design System, both of which pass 80%+ of automated accessibility tests for Tabs variants.

Technical Requirements

Keyboard navigation requires three specific mechanisms:

• Arrow key handling (not Tab key) for moving between tabs, with wrapping at boundaries
• Roving tabIndex so only the active tab is reachable via Tab key
• forwardRef to enable programmatic focus management from parent components

The implementation uses Children.map and cloneElement to inject index values and refs without explicit prop passing. Some developers prefer context APIs over cloneElement for cleaner syntax, but the cloning approach preserves JSX composition flexibility.

ARIA Implementation

The component follows WAI-ARIA Tabs Authoring Practices:

• role="tablist" on the container, role="tab" on buttons, role="tabpanel" on content
• aria-selected, aria-controls, and aria-labelledby for relationships
• Disabled tabs skipped during keyboard navigation
• Inactive panels hidden from screen readers

Trade-offs

Config-based approaches using array props are simpler for index tracking but sacrifice composition flexibility. The compound pattern requires more setup but maintains the component hierarchy developers expect.

One critique worth noting: over-reliance on ARIA without semantic HTML can create screen reader inconsistencies. The base elements here are <button> and proper list structures, with ARIA as enhancement rather than foundation.

Production Context

Tabs components fall under the broader UI component market, estimated at $15B+ in 2025, driven partly by WCAG compliance mandates in government and financial services procurement. Getting keyboard navigation right matters for accessibility audits and user experience alike.

The full implementation includes disabled state handling, automatic activation on arrow key press, and focus management that never jumps unexpectedly. These details separate components that pass automated tests from those that work for actual keyboard users.