Overview
React Aria (Adobe) provides accessible UI primitives for React. Handles keyboard navigation, screen reader announcements, focus management, and ARIA attributes — you provide styling.
Instructions
Step 1: Accessible Components
tsx
import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue } from 'react-aria-components'
export function SelectField({ label, items, onSelectionChange }) {
return (
<Select onSelectionChange={onSelectionChange}>
<Label>{label}</Label>
<Button><SelectValue /><span aria-hidden="true">▼</span></Button>
<Popover>
<ListBox>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>{item.name}</ListBoxItem>
))}
</ListBox>
</Popover>
</Select>
)
}
// Arrow keys navigate, Enter selects, Escape closes
// Screen reader: announces value, role, option count
Step 2: Focus Management
tsx
import { FocusScope } from 'react-aria'
function ModalDialog({ children, onClose }) {
return (
<FocusScope contain restoreFocus autoFocus>
<div role="dialog" aria-modal="true">
{children}
<button onClick={onClose}>Close</button>
</div>
</FocusScope>
)
}
Step 3: Custom Hooks
tsx
import { useButton } from 'react-aria'
import { useRef } from 'react'
function CustomButton(props) {
const ref = useRef(null)
const { buttonProps } = useButton(props, ref)
return <button {...buttonProps} ref={ref}>{props.children}</button>
}
Guidelines
- React Aria = behavior + accessibility. You control styling (Tailwind, CSS-in-JS).
react-aria-components: pre-built accessible components with render props.- Individual hooks (
useButton,useTextField) for fully custom designs. - FocusScope traps focus in modals — required for WCAG 2.1.
- Test with VoiceOver (Mac), NVDA (Windows), keyboard-only.