# React Aria

> 将无障碍的 React 颜色选择器与 React Aria Components 搭配：只保留一个浮层和焦点管理器，ChromaPanel 负责颜色输入。

Source: https://chroma-panel.jscrate.dev/zh/react/integrations/react-aria
Last updated: 2026-09-21

chroma-panel 不依赖 React Aria，但两者可以很自然地组合在一起。你可以单独使用 `ColorInput`，也可以把内联的 `ChromaPanel` 放进 React Aria 的 Popover 或 Dialog。

## 安装

```bash
npm install chroma-panel react-aria-components
```

只有当你的应用已经在用 `react-aria-components`，或者你希望由 React Aria 管理外层浮层时，才需要安装它。

## 使用 React Aria 弹出层

只保留一个触发器和一个弹出层。`DialogTrigger` 管理打开状态，`Popover` 负责定位，`ChromaPanel` 提供色轮、滑块、调色板等颜色控件。

```tsx
import { ChromaPanel } from "chroma-panel";
import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";

export function AriaColorPicker() {
  return (
    <DialogTrigger>
      <Button>Choose color</Button>
      <Popover placement="bottom start">
        <Dialog aria-label="Choose a color">
          <ChromaPanel defaultValue="#3366cc" showTitleBar={false} />
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}
```

不要把 `ColorInput` 放进这个弹出层。`ColorInput` 有自己的触发器和浮层，嵌套使用会导致关闭和焦点行为重复。

## 无障碍职责划分

在这个示例中，浮层的语义由 React Aria 负责，里面的选择器控件则由 chroma-panel 负责：

- 颜色轴是原生的 range 输入框，支持键盘操作，屏幕阅读器也能读出数值。
- 色块是按钮，带有可访问名称和选中状态。
- 模式标签页使用 roving tab stop（游走式焦点）。
- 遵循减少动态效果和强制颜色（forced-colors）设置。

给 React Aria 的 `Dialog` 设置一个有意义的标签，自定义触发器和表单字段也要保留标签。选择器支持的键盘命令和暴露的状态属性，见[无障碍功能](https://chroma-panel.jscrate.dev/zh/react/overview/accessibility)。

## 不搭配其他弹出层使用

如果不需要 React Aria 控制浮层，直接渲染 `ColorInput` 即可。它已经处理好了焦点归还、Escape 键、外部点击，以及移动端的底部面板。详见 [ColorInput 参考文档](https://chroma-panel.jscrate.dev/zh/react/components/color-input)。