Tabs

Introduction

The Tabs component provides a way to organize content into different sections that can be accessed one at a time. It follows WAI-ARIA guidelines and includes full keyboard support and proper ARIA attributes.

When to use

• Organizing related content into sections
• Switching between different views
• Form sections
• Product details pages
• Settings panels
• Dashboard sections

Progressive enhancement

The component uses JavaScript for enhanced functionality but maintains a logical structure even without it.

Usage

---
import { Tabs, TabsList, TabsTab, TabsPanel } from 'accessible-astro-components'
---

<Tabs>
  <TabsList>
    <TabsTab id="tab1" controls="panel1" selected>Tab 1</TabsTab>
    <TabsTab id="tab2" controls="panel2">Tab 2</TabsTab>
    <TabsTab id="tab3" controls="panel3">Tab 3</TabsTab>
  </TabsList>
  <TabsPanel id="panel1" labelledby="tab1" selected>
    <h2>Panel 1</h2>
    <p>Content for first panel</p>
  </TabsPanel>
  <TabsPanel id="panel2" labelledby="tab2">
    <h2>Panel 2</h2>
    <p>Content for second panel</p>
  </TabsPanel>
  <TabsPanel id="panel3" labelledby="tab3">
    <h2>Panel 3</h2>
    <p>Content for third panel</p>
  </TabsPanel>
</Tabs>

Props

Tabs

Prop	Type	Default	Description
class	string	undefined	Optional CSS class name

TabsList

Prop	Type	Default	Description
class	string	undefined	Optional CSS class name

TabsTab

Prop	Type	Default	Description
id	string	Required	Unique identifier for the tab
controls	string	Required	ID of the panel this tab controls
selected	boolean	false	Whether this tab is initially selected
class	string	undefined	Optional CSS class name

TabsPanel

Prop	Type	Default	Description
id	string	Required	Unique identifier for the panel
labelledby	string	Required	ID of the tab that labels this panel
selected	boolean	false	Whether this panel is initially visible
class	string	undefined	Optional CSS class name

Accessibility features

• Proper ARIA roles (tablist, tab, tabpanel)
• Keyboard navigation:
  • Left/Right arrows to move between tabs
  • Tab/Shift+Tab for focus management
• Clear focus indicators
• Proper ARIA states (aria-selected, aria-controls, aria-labelledby)
• Semantic HTML structure
• Proper focus management
• Smooth transitions (respecting reduced-motion preferences)

Styling

CSS Custom Properties

.tabs {
  --tab-padding: 1rem;
  --tab-gap: 0.5rem;
  --tab-border-width: 2px;
  --tab-radius: 6px;
  --tab-color-active: light-dark(#f0f0f0, #202020);
  --tab-bg-active: light-dark(#202020, #dddddd);
}

CSS Classes

.tab {
  flex-grow: 1;
  border: 2px solid;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  min-block-size: 10em;
  padding: 2rem;
}

.tab-panel[aria-hidden='true'] {
  display: none;
}

Interactive example

First Tab Second Tab Third Tab

First Panel

This is the content of the first panel. Try using the arrow keys to navigate between tabs!

Second Panel

Content for the second panel. Notice how the focus management works when tabbing through.

Third Panel

And here’s the third panel. The component handles all the ARIA attributes automatically.

Implementation note

The component automatically handles keyboard interactions and focus management. Use unique IDs for tabs and panels to ensure proper relationships.