Tabs

Onglets horizontaux in-page — chaque onglet affiche un panneau de contenu associé. Pattern ARIA tablist/tab/tabpanel conforme W3C APG, activation automatique au focus. Horizontal in-page tabs — each tab reveals an associated content panel. W3C APG-compliant tablist/tab/tabpanel ARIA pattern, automatic activation on focus.

AperçuPreview

Quand l'utiliserWhen to use

Règles absoluesAbsolute rules

• Toujours un label sur le tablist (pour les AT)Always a label on the tablist (for AT)
• Minimum 2 onglets — un seul onglet = pas de tabsMinimum 2 tabs — a single tab is not tabs
• Tablist positionné au-dessus du panneau (jamais à droite)Tablist positioned above the panel (never to the right)
• Labels en casse naturelle (jamais ALL-CAPS)Labels in natural case (never ALL-CAPS)
• Jamais pour un réglage sans panneau (→ agtc-segmented)Never for a setting without panel (→ agtc-segmented)
• Jamais de valeur en dur — toujours via var(--agtc-…)Never hardcoded values — always via var(--agtc-…)

ClavierKeyboard

Tokens de composantComponent tokens

AccessibilitéAccessibility

• role="tablist" + aria-label sur le conteneurrole="tablist" + aria-label on the container
• role="tab" + aria-selected + aria-controls sur chaque ongletrole="tab" + aria-selected + aria-controls on each tab
• role="tabpanel" + aria-labelledby sur chaque panneaurole="tabpanel" + aria-labelledby on each panel
• Roving tabindex : onglet actif tabindex="0", les autres -1Roving tabindex: active tab tabindex="0", others -1
• :focus-visible tokenisé · :visited neutralisé (ADR-047)Tokenized :focus-visible · neutralized :visited (ADR-047)
• Contraste texte actif (teal sur blanc) : 5.14:1 ✅ WCAG AAActive text contrast (teal on white): 5.14:1 ✅ WCAG AA

ImplémentationImplementation

<agtc-tabs label="Documentation Button" selected="overview">
  <div slot="overview">Overview content</div>
  <div slot="tokens">Tokens content</div>
</agtc-tabs>
<script type="module" src="../components/agtc-tabs.js"></script>
<script>
  document.querySelector('agtc-tabs').tabs = [
    { value: 'overview', label: 'Overview' },
    { value: 'tokens',   label: 'Tokens' },
  ];
</script>

DOs et DON'TsDOs and DON'Ts

UX Patterns Reference