react-aria

What is react-aria?

The react-aria package provides a collection of React hooks that help you build accessible user interfaces. It abstracts away the complexity of managing ARIA roles, properties, and keyboard interactions, making it easier to create components that are accessible to all users.

What are react-aria's main functionalities?

Button

The useButton hook provides the necessary ARIA attributes and event handlers to make a button accessible. It manages focus, keyboard interactions, and ARIA roles.

import { useButton } from 'react-aria';
import { useRef } from 'react';

function MyButton(props) {
  let ref = useRef();
  let { buttonProps } = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

Checkbox

The useCheckbox hook provides the necessary ARIA attributes and event handlers to make a checkbox accessible. It manages state, keyboard interactions, and ARIA roles.

import { useCheckbox } from 'react-aria';
import { useRef } from 'react';

function MyCheckbox(props) {
  let ref = useRef();
  let { inputProps } = useCheckbox(props, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {props.children}
    </label>
  );
}

Dialog

The useDialog hook provides the necessary ARIA attributes and event handlers to make a dialog accessible. It manages focus trapping, keyboard interactions, and ARIA roles.

import { useDialog } from 'react-aria';
import { useRef } from 'react';

function MyDialog(props) {
  let ref = useRef();
  let { dialogProps } = useDialog(props, ref);

  return (
    <div {...dialogProps} ref={ref}>
      {props.children}
    </div>
  );
}

Other packages similar to react-aria

react-a11y

react-a11y is a package that provides accessibility warnings in the console during development. It helps developers identify and fix accessibility issues in their React components. Unlike react-aria, it does not provide hooks or components to manage ARIA attributes and interactions.

reakit

Reakit is a low-level component library for building accessible web apps. It provides primitive components that can be composed to create more complex UI elements. Reakit focuses on flexibility and composability, similar to react-aria, but offers a different API and set of components.

README

React ARIA

Utility components to help compose ARIA components in React. Please feel free to file an issue or submit a PR if you feel these can be more ARIA compliant ❤️

Usage

yarn add react-aria

npm install react-aria --save

<script src="https://unpkg.com/react-aria/dist/react-aria.js"></script>
(UMD library exposed as `ReactARIA`)

Building a select menu

import { Overlays: { Trigger, Overlay, Item } } from 'react-aria'

class SelectMenu extends Component {
  state = {
    selection: null
  }

  _handleSelection = (item, e) => {
    this.setState({
      selection: item.value,
      isOpen: false
    })
  }

  render() {
    const { isOpen } = this.state
    return (
      <div>
        <Trigger
          controls="select-menu"
          type="menu"
          isOpen={isOpen}
          onToggle={() => this.setState({ isOpen: !isOpen })}
        >
          {this.state.selection || 'Select A Dropdown Item'}
        </Trigger>
        { isOpen &&
          <Overlay
            id="select-menu"
            type="menu"
            onItemSelection={this._handleSelection}
            onRequestClose={() => this.setState({ isOpen: false })}
          >
            <Item value="apples">Apples</Item>
            <Item value="pears">Pears</Item>
            <Item value="oranges">Oranges</Item>
          </Overlay>
        }
      </div>
    )
  }
}

Building a set of tabs

import { Tabs: { Manager, TabList, Tab, TabPanel } } from 'react-aria'

class TabsDemo extends Component {
  state = {
    tabs: [{
      id: 't1',
      title: 'Bacon 🐷',
      panel: <div>And eggs 🐔</div>
    }, {
      id: 't2',
      title: 'Zombiez 💀',
      panel: <div>Brainz</div>
    }, {
      id: 't3',
      title: 'Samuel 👨🏿',
      panel: <div>Samuel L Jackson</div>
    }],
    activeId: 't2'
  }

  render() {
    const { tabs, activeId } = this.state
    return (
      <Manager
        activeTabId={activeId}
        onChange={id => this.setState({ activeId: id })}
        className="tab-set"
      >
        <TabList className="tab-list">
          {tabs.map(({ id, title }) =>
            <Tab
              key={id}
              id={id}
              isActive={id === activeId}
              className={`tab-list-item ${id === activeId ? 'is-active' : ''}`}
            >
              {title}
            </Tab>
          )}
        </TabList>
        <div className="tab-panels">
          {tabs.map(({ id, panel }) =>
            <TabPanel
              key={id}
              controlledBy={id}
              isActive={id === activeId}
              className="tab-panel"
            >
              {panel}
            </TabPanel>
          )}
        </div>
      </Manager>
    )
  }
}

Running Locally

clone repo

git clone [e-mail]:souporserious/react-aria.git

move into folder

cd ~/react-aria

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/

Thank You

Huge thank you to David Clark and all of his ARIA work. Most of the code in here is heavily inspired by what he has done.