Design System

Accessible Components

A curated set of UI widgets built to WAI-ARIA Authoring Practices — fully operable by keyboard and screen reader, with no external dependencies.

03

Tabs

Horizontal tablist with roving tabindex, arrow-key movement, and hidden panels.

Project overview

Aria Kit is a living component library for building accessible interfaces without shipping a single dependency.

Keyboard contract

Only the active tab is in the tab order; arrow keys move between tabs.

  • ←→ tabs
  • HomeEnd jump
  • EnterSpace activate
04

Combobox

Autocomplete using the aria-activedescendant pattern — the list is never itself focusable.

    Keyboard contract

    Typing filters options; the highlighted option is tracked via aria-activedescendant.

    • ↑↓ highlight
    • Enter select
    • Esc revert & close
    • focus out closes
    05

    Accordion

    Disclosure group where multiple panels can be open, with height animation that never breaks visibility.

    A shared focus-trap utility handles the modal, while the menu, tabs, and combobox each return focus to their trigger. Every component keeps its ARIA attributes in sync with visual state on the same tick as the DOM change.

    Focus return targets are stored per-component so that closing always lands the caret back where it belongs.

    When the modal opens, the document body is marked inert, which removes every other control from the tab order and prevents interaction. The modal itself is then the only focusable surface.

    All transitions read from a single tuning block. The prefers-reduced-motion media query collapses every duration to near-zero, and the accordion toggles the hidden attribute at the end of the animation so assistive tech never reports empty content.

    Keyboard contract

    Each disclosure toggles its region; several panels may stay open at once.

    • EnterSpace toggle
    • ↑↓ move between triggers
    • HomeEnd jump