Accessible Tabs

import React, { useRef, useState } from "react";
import "./AccessibleTabs.css";

/**
 * AccessibleTabs
 *  - tabs:         [{ id, label, content }]
 *  - defaultId:    initially selected tab id
 *  - label:        aria-label for the tablist
 *  - orientation:  "horizontal" (default) | "vertical"
 *  - activation:   "manual" (default) | "automatic"
 */
export default function AccessibleTabs({
  tabs,
  defaultId,
  label = "Tabs",
  orientation = "horizontal",
  activation = "manual",
}) {
  const [active, setActive] = useState(defaultId ?? tabs[0]?.id);
  const btnRefs = useRef({});

  function activate(id) {
    setActive(id);
  }

  function focusTab(id) {
    btnRefs.current[id]?.focus();
  }

  function onKey(e, index) {
    const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
    const prevKey = orientation === "vertical" ? "ArrowUp"   : "ArrowLeft";
    let next = null;
    if (e.key === nextKey) next = (index + 1) % tabs.length;
    else if (e.key === prevKey) next = (index - 1 + tabs.length) % tabs.length;
    else if (e.key === "Home") next = 0;
    else if (e.key === "End")  next = tabs.length - 1;
    if (next === null) return;
    e.preventDefault();
    const id = tabs[next].id;
    focusTab(id);
    if (activation === "automatic") activate(id);
  }

  return (
    <>
      <div
        role="tablist"
        aria-label={label}
        aria-orientation={orientation}
        className={`tabs tabs--${orientation}`}
      >
        {tabs.map((t, i) => {
          const isActive = active === t.id;
          return (
            <button
              key={t.id}
              ref={(el) => (btnRefs.current[t.id] = el)}
              type="button"
              role="tab"
              id={`tab-${t.id}`}
              aria-selected={isActive}
              aria-controls={`panel-${t.id}`}
              tabIndex={isActive ? 0 : -1}
              onClick={() => activate(t.id)}
              onKeyDown={(e) => onKey(e, i)}
              className={`tabs__tab ${isActive ? "is-active" : ""}`}
            >
              {t.label}
            </button>
          );
        })}
      </div>

      {tabs.map((t) => (
        <div
          key={t.id}
          role="tabpanel"
          id={`panel-${t.id}`}
          aria-labelledby={`tab-${t.id}`}
          tabIndex={0}
          hidden={active !== t.id}
          className="tabs__panel"
        >
          {t.content}
        </div>
      ))}
    </>
  );
}

import AccessibleTabs from "./AccessibleTabs";

export default function Demo() {
  const tabs = [
    { id: "profile", label: "Profile", content: <ProfilePanel /> },
    { id: "billing", label: "Billing", content: <BillingPanel /> },
    { id: "notifications", label: "Notifications", content: <NotifPanel /> },
  ];

  return (
    <AccessibleTabs
      tabs={tabs}
      defaultId="profile"
      label="Account settings"
      orientation="horizontal"
      activation="manual"
    />
  );
}