Accessibility

Subframe components are accessible by default. We use Radix under the hood, which provides built-in keyboard navigation, focus management, and ARIA attributes.

Adding accessibility attributes

All components pass through props to the top-level element. You can add any ARIA attribute directly:

<Button aria-label="Close dialog" aria-describedby="dialog-description">
  <Icon name="FeatherX" />
</Button>

<TextField aria-required="true" aria-invalid={hasError} />

<Card role="article" aria-labelledby="card-title" />

Common attributes you might use:

aria-label — Describes the element for screen readers
aria-describedby — References an element that describes this one
aria-required — Indicates a required form field
aria-invalid — Indicates validation errors
aria-expanded — Indicates expandable content state
aria-hidden — Hides decorative elements from screen readers
role — Overrides the semantic role of an element

For more complex accessibility needs, you can also add logic in the component’s wrapper index.tsx for code reuse.

Design

Browser

Agent

Building from scratch

Admin and billing

Adding accessibility attributes

​Adding accessibility attributes

Adding accessibility attributes