react-aria

react-aria is a collection of React Hooks that provide accessible UI primitives for building robust and inclusive user interfaces. It's developed by Adobe and is a part of the broader Adobe Spectrum design system ecosystem, though it is completely styling-agnostic and can be used with any design system or custom styling.

The core problem react-aria solves is the inherent complexity of building truly accessible UI components. Ensuring proper WAI-ARIA attributes, managing keyboard navigation, focus management, internationalization (including right-to-left languages), and screen reader compatibility can be incredibly challenging and error-prone. react-aria abstracts these complexities, providing developers with a set of well-tested, robust hooks that handle these details automatically.

Key features and benefits of react-aria include:

* Comprehensive Accessibility: It implements WAI-ARIA authoring practices, ensuring components are usable by people with disabilities using assistive technologies like screen readers.
* Robust Interaction Management: It handles complex interactions out of the box, including keyboard navigation (e.g., arrow keys for lists, tab for focus management), pointer events, and touch gestures.
* Internationalization Support: Built-in support for different locales, including date/time formatting, number formatting, and right-to-left (RTL) language layouts.
* Styling Agnostic: react-aria only provides the behavior and accessibility attributes. It doesn't ship with any default styles, allowing developers to apply their own CSS, CSS-in-JS solutions (e.g., styled-components, Emotion), or utility-first frameworks (e.g., Tailwind CSS).
* State Management: It often works in conjunction with `react-stately` (another Adobe library) to manage complex component states, separating logic from presentation.
* Composition and Extensibility: Designed to be highly composable, allowing developers to build complex components from simpler, accessible primitives.

Developers typically use react-aria hooks (e.g., `useButton`, `useSwitch`, `useComboBox`, `useListBox`, `useModal`, `useDatePicker`) to get an object of `props` that are then spread onto native HTML elements. This injects all the necessary ARIA attributes, event handlers, and focus management logic.

It is an ideal choice for developers who need to build custom, highly interactive UI component libraries or complex individual components that must meet high accessibility standards without being tied to a specific visual design system.

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

function MyAccessibleButton(props) {
  let ref = React.useRef();
  // useButton returns buttonProps (e.g., onClick, onKeyDown, aria-label etc.)
  // and also provides state (e.g., isPressed) if you use useButton with a state hook.
  let { buttonProps } = useButton(props, ref);
  let { children } = props;

  return (
    <button
      {...buttonProps}
      ref={ref}
      style={{
        padding: '10px 20px',
        fontSize: '16px',
        backgroundColor: props.isDisabled ? '#cccccc' : '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: props.isDisabled ? 'not-allowed' : 'pointer',
        outline: 'none',
        // Example of focus styling for accessibility (focus-visible for keyboard users)
        boxShadow: '0 0 0 0 transparent',
        transition: 'background-color 0.2s, box-shadow 0.2s'
      }}
      // Apply focus-visible styling via a class or inline pseudo-selector if supported
      // For simplicity, direct style object does not support pseudo-classes directly. 
      // In a real app, you'd use CSS classes or a CSS-in-JS library for this.
      onFocus={(e) => {
        if (!props.isDisabled) {
          e.currentTarget.style.boxShadow = '0 0 0 3px rgba(0, 123, 255, 0.5)';
        }
      }}
      onBlur={(e) => {
        e.currentTarget.style.boxShadow = '0 0 0 0 transparent';
      }}
    >
      {children}
    </button>
  );
}

function App() {
  const handlePress = () => {
    alert('Button pressed!');
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>react-aria Button Example</h1>
      <p>This button uses `useButton` from react-aria for accessibility, keyboard interaction, and focus management. The styling is custom.</p>
      <div style={{ display: 'flex', gap: '15px', marginTop: '20px' }}>
        <MyAccessibleButton onPress={handlePress}>
          Click Me (Accessible)
        </MyAccessibleButton>
        <MyAccessibleButton onPress={() => alert('Disabled button cannot be pressed!')} isDisabled>
          Disabled Button
        </MyAccessibleButton>
      </div>
    </div>
  );
}

export default App;