React aria

Skill ComeOnOliver/skillshub/skills/TerminalSkills/skills/react-aria

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill react-aria

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.9 KB, as published. Nobody here has run it

React Aria

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

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

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

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.