The Complete Production SOP: How to Deploy and Run Adobe React Aria Unstyled Accessible Component Behaviors in Autonomous AI Agents

---
name: "react-aria-headless-components"
description: "Implement accessible ARIA design patterns with keyboard navigation and internationalization."
metadata:
  author: "Adobe"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use react aria hooks"
  - "accessible combobox react aria"
  - "focus management react aria"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Adobe React Aria Unstyled Accessible Component Behaviors

Implements Adobe React Aria hooks: useButton, useComboBox, useDatePicker, useOverlay, managing WAI-ARIA states, focus management, screen reader announcements, and RTL language direction support.

{
  "dependencies": {
    "@react-aria/button": "^3.10.0",
    "@react-aria/combobox": "^3.9.0",
    "@react-aria/focus": "^3.19.0",
    "@react-aria/i18n": "^3.12.0",
    "@react-stately/combobox": "^3.9.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

import React, { useRef } from 'react';
import { useComboBoxState } from '@react-stately/combobox';
import { useComboBox } from '@react-aria/combobox';
import { useButton } from '@react-aria/button';
import type { ComboBoxProps } from '@react-types/combobox';

export function AccessibleComboBox<T extends object>(props: ComboBoxProps<T>) {
  const state = useComboBoxState(props);
  const inputRef = useRef<HTMLInputElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const listBoxRef = useRef<HTMLUListElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);

  const { buttonProps, inputProps, listBoxProps, labelProps } = useComboBox(
    { ...props, inputRef, buttonRef, listBoxRef, popoverRef },
    state
  );
  const { buttonProps: triggerButtonProps } = useButton(buttonProps, buttonRef);

  return (
    <div className="combobox-container">
      <label {...labelProps}>{props.label}</label>
      <div className="input-group">
        <input {...inputProps} ref={inputRef} />
        <button {...triggerButtonProps} ref={buttonRef}>▼</button>
      </div>
      {state.isOpen && (
        <ul {...listBoxProps} ref={listBoxRef} className="dropdown-listbox">
          {[...state.collection].map((item) => (
            <li key={item.key} className="listbox-option">{item.rendered}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

#!/usr/bin/env bash
set -euo pipefail

echo "Checking TypeScript typings for React Aria hooks..."
pnpm tsc --noEmit

echo "Running JSX Accessibility Linting..."
pnpm eslint . --ext .ts,.tsx --rule 'jsx-a11y/role-has-required-aria-props: error'

echo "Accessibility Gate Passed successfully."