可访问性

🌐 Accessibility

React Flow 提供键盘和屏幕阅读器支持，以帮助满足无障碍标准。默认情况下，所有节点和边都可以通过键盘聚焦和操作。你可以通过包括 nodesFocusable、edgesFocusable 和 disableKeyboardA11y 的属性启用或禁用这些功能，这些属性可以像这样通过 <ReactFlow /> 传递：

🌐 React Flow provides keyboard and screen-reader support to help meet accessibility standards. By default, all nodes and edges are keyboard-focusable and operable. You can enable or disable these features with props including: nodesFocusable, edgesFocusable, and disableKeyboardA11y which are passed through <ReactFlow /> like this:

<ReactFlow
  nodesFocusable={true}
  edgesFocusable={true}
  disableKeyboardA11y={false}
  nodes={nodes}
  edges={edges}
>
  
</ReactFlow>

内置功能

🌐 Built-in features

• 标签导航： 按下 Tab 会将焦点在所有可聚焦的节点和边之间移动。这些元素会接收 tabIndex={0}，并且默认会接收 role="group" 以处理交互性。
• 选择/取消选择： 按 Enter 或 Space 选择焦点节点/边，按 Escape 清除选择。
• 使用箭头键移动节点： 如果 nodesDraggable 和 nodesFocusable 都为真（默认），你可以使用箭头键移动选中的节点。你可以按住 Shift 来增加移动速度。如果你设置了 disableKeyboardA11y={true}，箭头键移动将被禁用（但 Tab 键聚焦和选择仍然有效）。
• 自动平移: 当一个节点获得焦点时，React Flow 会自动平移画布以将该节点显示在视野中。这确保了获得焦点的节点对用户可见。可以通过 autoPanOnNodeFocus 属性来切换此行为。
• ARIA 描述： React Flow 会自动添加用于键盘导航的 ARIA 描述。这些可以通过使用 ariaLabelConfig 进行配置。

节点和边的 ARIA 角色

🌐 ARIA roles for nodes and edges

默认情况下，React Flow 对交互元素使用语义 ARIA 角色。你可以使用 ariaRole 属性覆盖节点的角色。例如：

🌐 By default, React Flow uses semantic ARIA roles for interactive elements. You can override a node’s role using the ariaRole prop. For example:

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    ariaRole: 'button',
  },
];
<ReactFlow nodes={nodes} edges={[]} />;

默认情况下，如果你没有设置角色，将应用 role="group"。自定义 ariaRole 可以让你匹配任何相关的 ARIA 角色（例如 "listitem"、"region" 等），从而改善辅助技术的语义信息。

🌐 By, default, if you don’t set a role, role="group" is applied. Customizing ariaRole lets you match any relevant ARIA role (e.g. "listitem", "region", etc.), improving semantic information for assistive technology.

注意： ariaRole 应用于节点封装器。如果自定义节点包含交互式元素，请避免在节点本身上设置 ariaRole: 'button'。相反，应将适当的 ARIA 角色直接应用于交互式元素。

DOM 属性

🌐 DOM attributes

要传递自定义 ARIA 属性或其他 DOM 级别属性（例如 aria-roledescription、data-\*、tabIndex 等），你可以使用 domAttributes 属性。这对节点和边都可用：

🌐 To pass custom ARIA attributes or other DOM-level attributes (e.g., aria-roledescription, data-\*,tabIndex, etc.), you can use the domAttributes prop. This is available for both nodes and edges:

// Example for a node
{
  id: '2',
  data: { label: 'Accessible Node' },
  domAttributes: {
    'aria-roledescription': 'collapsible node',
    tabIndex: 0,
    'data-test-id': 'node-2',
  },
}

这使你可以完全控制与可访问性相关的属性，同时保留 React Flow 的内置角色和行为。

🌐 This gives you full control over accessibility-related attributes while maintaining React Flow’s built-in roles and behaviors.

本地化无障碍信息

🌐 Localizing accessibility messages

React Flow 内置的可访问性文本（如键盘指令和实时更新）可以通过 <ReactFlow> 上的 ariaLabelConfig 属性进行自定义或本地化。该属性接受一个将消息键映射到字符串或函数的对象。键包括：

🌐 React Flow’s built-in accessibility text (such as keyboard instructions and live updates) can be customized or localized via the ariaLabelConfig prop on<ReactFlow>. This prop takes an object mapping message keys to strings or functions. Keys include:

例如，要提供自定义或本地化的文本：

🌐 For example, to provide custom or localized text:

const ariaLabels = {
  'node.a11yDescription.default': 'Press [Enter] to select this node',
  'node.a11yDescription.keyboardDisabled': 'Keyboard navigation is disabled',
};
<ReactFlow nodes={nodes} edges={edges} ariaLabelConfig={ariaLabels}>
  <MiniMap />
  <Controls />
</ReactFlow>;

这告诉 React Flow 使用你的文本而不是默认值。通过通过 ariaLabelConfig 提供本地化字符串，你可以确保屏幕阅读器以用户的语言朗读消息。

🌐 This tells React Flow to use your text instead of the defaults. By supplying localized strings via ariaLabelConfig, you ensure screen readers announce messages in the user’s language.

WCAG 2.1 AA

🌐 WCAG 2.1 AA

React Flow 提供的功能在正确实现后可帮助你满足 WCAG 2.1 AA 的关键标准：

🌐 React Flow provides features that can help you meet key WCAG 2.1 AA criteria when properly implemented:

• 键盘: React Flow 支持通过 Tab 导航节点和边，通过 Enter/Space 进行交互，以及使用方向键移动节点的键盘操作。这些功能有助于满足键盘可访问性的要求。
• **屏幕阅读器：**通过语义 ARIA 角色和标签（例如 role="group"、aria-label 和 aria-roledescription），React Flow 使你能够创建具有意义的图形节点/边缘的可通告内容。边缘组件包括可自定义的 aria-label，节点可以赋予适当的 aria-label 文本。
• ARIA 实时区域: 动态更新会通过 aria-live 区域进行公告。A11yDescriptions 组件包含一个带有 aria-live="assertive" 的元素，用于通知用户节点的移动，帮助你满足状态消息的要求。
• 指令与焦点管理： React Flow 提供了带有清晰指令的上下文帮助，例如“按回车或空格选择节点……”。自动焦点管理确保在节点获得焦点时会滚动到可见区域，有助于满足输入辅助的要求。

本指南有助于了解 ARIA 最佳实践 。

🌐 This guide is helpful for learning about ARIA best practices .