React Aria

title: "React Aria Components" weight: 20 description: "Learn how to use React Aria by Adobe -- a library of accessible React hooks and components that handle ARIA, keyboard interactions, focus management, and screen reader support out of the box." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, react]

React Aria by Adobe provides production-ready React hooks and components that implement ARIA patterns, keyboard navigation, focus management, and screen reader support out of the box -- including Button, Dialog, Menu, Select, Slider, Tabs, and more.

## What You'll Learn

You will install and use React Aria components, customize their styling, handle complex interactions, and understand when to use React Aria vs building custom components.

## Why It Matters

React Aria handles the complex accessibility logic that is easy to get wrong. Instead of implementing ARIA patterns yourself, you get battle-tested components that follow WCAG and ARIA authoring practices.

## Real-World Use

A team needs an accessible date picker. Implementing it from scratch with full keyboard support, screen reader announcements, and focus management would take weeks. React Aria's useDatePicker hook provides all of this out of the box.

## React Aria Components

```mermaid
flowchart TD
  A[React Aria] --> B[Hooks]
  A --> C[Components]
  B --> D[useButton, useSlider]
  B --> E[useDialog, useMenu]
  B --> F[useSelect, useComboBox]
  C --> G[Button, Dialog, Menu]
  C --> H[Select, Slider, Tabs]

Using React Aria

Install the package and use hooks or components in your React app.

npm install react-aria-components

import { Button, Dialog, Modal, Heading } from 'react-aria-components';

function ExampleModal() {
  return (
    <Modal>
      <Dialog>
        {({ close }) => (
          <>
            <Heading slot="title">Confirm</Heading>
            <p>Are you sure you want to delete this item?</p>
            <Button onPress={close}>Cancel</Button>
            <Button onPress={() => { deleteItem(); close(); }}>
              Delete
            </Button>
          </>
        )}
      </Dialog>
    </Modal>
  );
}

// React Aria Select with custom styling
import { Select, Label, Button, SelectValue, Popover, ListBox, ListBoxItem } from 'react-aria-components';

function AccessibleSelect({ label, items, selectedKey, onSelectionChange }) {
  return (
    <Select selectedKey={selectedKey} onSelectionChange={onSelectionChange}>
      <Label>{label}</Label>
      <Button>
        <SelectValue />
        <span aria-hidden="true">v</span>
      </Button>
      <Popover>
        <ListBox>
          {items.map(item => (
            <ListBoxItem key={item.id} id={item.id}>
              {item.name}
            </ListBoxItem>
          ))}
        </ListBox>
      </Popover>
    </Select>
  );
}

// React Aria Slider
import { Slider, SliderTrack, SliderThumb, Label, SliderOutput } from 'react-aria-components';

function VolumeSlider() {
  return (
    <Slider defaultValue={50} minValue={0} maxValue={100}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Label>Volume</Label>
        <SliderOutput />
      </div>
      <SliderTrack style={{ height: 24 }}>
        <div style={{ position: 'absolute', height: 6, top: 9, background: '#ccc', width: '100%' }} />
        <SliderThumb style={{
          width: 24,
          height: 24,
          borderRadius: '50%',
          background: '#0056b3'
        }} />
      </SliderTrack>
    </Slider>
  );
}

Common Mistakes

• Not customizing styles (React Aria needs styling)
• Using React Aria for simple elements where semantic HTML suffices
• Not reading the React Aria documentation for specific patterns
• Overriding built-in keyboard handling incorrectly
• Not testing with screen readers despite using React Aria
• Mixing React Aria components with non-accessible custom components
• Not handling focus management when combining with other libraries

Practice and Challenge

Practice 1: Install React Aria and render a Button component. Practice 2: Build an accessible Select with React Aria. Practice 3: Create a Dialog with proper focus management. Practice 4: Build a Slider with React Aria hooks. Practice 5: Test React Aria components with axe-core.

Challenge: Build a complete form using React Aria components: TextField, Select, Slider, Checkbox, Radio Group, DatePicker, and Button. Style each component to match a design system. Test the form with keyboard navigation and a screen reader.

FAQ

Mini Project

Create a React Aria component showcase page with: Button, Dialog/Modal, Select, Slider, Tabs, Menu, DatePicker, and ComboBox. Each component should be styled consistently and include a code snippet showing the usage. Test the page with keyboard navigation and a screen reader.

What's Next

Reach UI Accessibility covers accessibility features of Reach UI library.