typescript 62 lines · 8 steps

Building an accessible tabs component in React

A React tabs widget that wires up ARIA roles and full keyboard navigation following the WAI-ARIA pattern.

Explained by highlit

React Intermediate accessibility aria keyboard-navigation refs hooks

1import { useCallback, useId, useRef, useState, type KeyboardEvent } from 'react';
2 
3interface Tab {
id: string;
label: string;
content: React.ReactNode;
7}
8 
9export function Tabs({ tabs }: { tabs: Tab[] }) {
const baseId = useId();
const [active, setActive] = useState(0);
const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
13 
const focusTab = useCallback((index: number) => {
  const next = (index + tabs.length) % tabs.length;
  setActive(next);
  tabRefs.current[next]?.focus();
}, [tabs.length]);
19 
const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
  switch (event.key) {
    case 'ArrowRight': event.preventDefault(); focusTab(index + 1); break;
    case 'ArrowLeft': event.preventDefault(); focusTab(index - 1); break;
    case 'Home': event.preventDefault(); focusTab(0); break;
    case 'End': event.preventDefault(); focusTab(tabs.length - 1); break;
  }
};
28 
return (
  <div className="tabs">
    <div role="tablist" aria-label="Content sections">
      {tabs.map((tab, index) => (
        <button
          key={tab.id}
          ref={(el) => { tabRefs.current[index] = el; }}
          role="tab"
          id={`${baseId}-tab-${tab.id}`}
          aria-controls={`${baseId}-panel-${tab.id}`}
          aria-selected={active === index}
          tabIndex={active === index ? 0 : -1}
          onClick={() => setActive(index)}
          onKeyDown={(event) => onKeyDown(event, index)}
        >
          {tab.label}
        </button>
      ))}
    </div>
    {tabs.map((tab, index) => (
      <div
        key={tab.id}
        role="tabpanel"
        id={`${baseId}-panel-${tab.id}`}
        aria-labelledby={`${baseId}-tab-${tab.id}`}
        hidden={active !== index}
        tabIndex={0}
      >
        {tab.content}
      </div>
    ))}
  </div>
);
62}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Accessible widgets need ARIA roles, relationships, and keyboard handling working together — not just click handlers.
2A roving tabIndex (0 on the active tab, -1 on the rest) keeps a group of controls as a single tab stop.
3useId gives stable, unique ids so aria-controls and aria-labelledby can cross-reference elements reliably.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';