Skill LibraryPrompt Skill1 DesignsTop Views

ARIA Component Contract

Define executable contracts for custom component roles, accessible names, keyboard behavior, focus management, state attributes, and test assertions.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Accessibility

Skill Directive

Description

Define executable contracts for custom component roles, accessible names, keyboard behavior, focus management, state attributes, and test assertions.

TagsAccessibility

Skill Prompt

- Inputs must include component type, whether native HTML can be used, target interaction, state list, Radix/shadcn usage, modal/portal context, keyboard path, and screen-reader expectation.
- Make a native-first decision: use `button`, `a`, `input`, `select`, or `details/summary` when they fit; use ARIA only when native semantics cannot express the interaction.
- Write a component contract table: role, accessible name, description, owned/controlled elements, keyboard keys, focus entry/exit, state attributes, and disabled/read-only/loading/error expression.
- State attributes must align with DOM/ARIA: open uses `aria-expanded` or `data-state="open"`, selected uses `aria-selected`/`aria-current`, pressed uses `aria-pressed`, invalid uses `aria-invalid` and `aria-describedby`.
- Keyboard behavior follows WAI-ARIA APG or the selected primitive's expected behavior: Tab order, Arrow/Home/End/Escape/Enter/Space support must be listed explicitly.
- For Radix/shadcn components, preserve the primitive's focus management, portal, label, description, and data attributes; do not break default accessibility for animation or styling.
- Visual states cover hover, focus-visible, active, disabled, loading, error, selected/open, forced-colors, and reduced-motion; critical state cannot be color-only.
- Deliver a component contract, React/HTML attribute draft, CSS data-attribute selector guidance, keyboard test plan, screen-reader note, and Playwright/Testing Library assertions.
- Failure conditions: missing accessible name, trapped or lost focus, keyboard-inoperable control, ARIA inconsistent with visible state, clickable disabled state, unannounced loading, or error shown only as a red border.
- Sources referenced: W3C Using ARIA, WAI-ARIA/APG patterns, ARIA in HTML, WCAG Name Role Value, Testing Library ByRole, Radix Accessibility, and Carbon component-state testing. The content is rewritten as Interface Lab component-contract skill guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

ARIA Component Contract

More pages using ARIA Component Contract