React Aria

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

安装

npm install chroma-panel react-aria-components

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

使用 React Aria 弹出层

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

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 设置一个有意义的标签，自定义触发器和表单字段也要保留标签。选择器支持的键盘命令和暴露的状态属性，见无障碍功能。

不搭配其他弹出层使用

如果不需要 React Aria 控制浮层，直接渲染 ColorInput 即可。它已经处理好了焦点归还、Escape 键、外部点击，以及移动端的底部面板。详见 ColorInput 参考文档。