# React Aria

Build accessible UI components with React Aria Components.

- Repository: https://github.com/NextAdminHQ/nextjs-admin-dashboard (603 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-08-18
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add NextAdminHQ/nextjs-admin-dashboard --skill react-aria -g -a claude-code -y`
Codex: `npx skills add NextAdminHQ/nextjs-admin-dashboard --skill react-aria -g -a codex -y`
Cursor: `npx skills add NextAdminHQ/nextjs-admin-dashboard --skill react-aria -g -a cursor -y`
Gemini CLI: `npx skills add NextAdminHQ/nextjs-admin-dashboard --skill react-aria -g -a gemini-cli -y`

## Description

Build accessible UI components with React Aria Components. Use when developers mention React Aria, react-aria-components, accessible components, or need unstyled accessible primitives. Provides documentation for building custom accessible UI with hooks and components.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React Aria Components

## Test utilities

`@react-aria/test-utils` provides ARIA pattern testers that simulate mouse, keyboard, and touch interactions for components built with React Aria Components.

### Installation

```bash
npm install @react-aria/test-utils --save-dev
```

### Core pattern

External consumers should import from `@react-aria/test-utils`.

Initialize a `User` once per test file. Call `createTester` to get a tester for a specific ARIA pattern, then call tester methods to simulate interactions.

```ts
import {User} from '@react-aria/test-utils';

// Provide whatever method of advancing timers you use in your test, this example assumes Jest with fake timers.
// 'interactionType' specifies what mode of interaction should be simulated by the tester
// 'advanceTimer' is used by the tester to advance the timers in the tests for specific interactions (e.g. long press)
let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});

it('my test case', async function () {
  // Render your test component/app
  let {getByTestId} = render();
  // Initialize the table tester via providing the 'Table' pattern name and the root element of said table
  let tableTester = testUtilUser.createTester('Table', {root: getByTestId('test_table')});
  expect(tableTester.getSelectedRows()).toHaveLength(0);

  await tableTester.toggleSelectAll();
  expect(tableTester.getSelectedRows()).toHaveLength(10);
  ...
});
```

Set `interactionType` to `'mouse'`, `'keyboard'`, or `'touch'`. Override per tester via `createTester(..., {interactionType})` or per method call.

When using fake timers, pass `advanceTimer: jest.advanceTimersByTime` and flush timers after each test:

```ts
afterEach(() => {
  act(() => jest.runAllTimers());
});
```

The rest: https://github.com/NextAdminHQ/nextjs-admin-dashboard/blob/HEAD/.agents/skills/react-aria/SKILL.md