From 452c456539c744eee6b0c0d313a8d15a0e2a12d5 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 17 Dec 2025 11:57:29 -0500 Subject: [PATCH 1/2] chore(ReactFlow): updated guidance for a11y --- .../generative-uis/compass/CompassReactFlowDemo.tsx | 1 + .../content/AI/generative-uis/compass/ReactFlow.md | 12 +++++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.tsx b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.tsx index a196387b29..9c28a38fb0 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.tsx +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/CompassReactFlowDemo.tsx @@ -227,6 +227,7 @@ const AddNodeOnEdgeDrop = () => { fitView fitViewOptions={{ padding: 2 }} nodeOrigin={nodeOrigin} + aria-label="React flow demo" > diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md index 80f3031776..66f3a12f2a 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md @@ -50,4 +50,14 @@ This list outlines the overrides used in the following example, which also rende | --xy-handle-border-color-default | var(--pf-t--global--border--color--alt) | ```js file="./CompassReactFlowDemo.tsx" -``` \ No newline at end of file +``` + +### Accessibility considerations + +While React Flow is built with accessibility in mind, you should always check that your implementation when paired with PatternFly is accessible via mouse, keyboard, and other assistive technologies like screen readers. Some things to keep in mind include: + +- Providing an accessible name to the `` component, if its default role of "application" is kept or if it is given another semantic role that requires an accessible name. +- Due to the nature of React Flow and howw you are able to click and drag nodes, if your draggable nodes contain other actions inside of them (kebab toggles, links, other action buttons), you should ensure those actions are large enough to prevent misclicks. + - [WCAG 2.5.8 - Target size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum) requires at least 24z24 CSS pixels. While they also state exceptions, because a React Flow node itself can be clicked for some action, you should aim for sticking to this minimum, especially if implementing an action where clicking a node quickly can open a details drawer. +- In general ensure that any actions that can be taken via mouse only can be taken via keyboard as well, whether that be actions inside a node or being able to drag a node around to reposition it. + - Dragging nodes via keyboard should be built into React Flow itself out of the box, but always double check in case. \ No newline at end of file From bf1feeff7918748c4bf18fb82f4c2e7601711fed Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 18 Dec 2025 16:20:15 -0500 Subject: [PATCH 2/2] Erin feedback --- .../content/AI/generative-uis/compass/ReactFlow.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md index 66f3a12f2a..aee998bd40 100644 --- a/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md +++ b/packages/documentation-site/patternfly-docs/content/AI/generative-uis/compass/ReactFlow.md @@ -54,10 +54,12 @@ This list outlines the overrides used in the following example, which also rende ### Accessibility considerations -While React Flow is built with accessibility in mind, you should always check that your implementation when paired with PatternFly is accessible via mouse, keyboard, and other assistive technologies like screen readers. Some things to keep in mind include: +While React Flow is built with accessibility in mind, you should always check that your implementation (when paired with PatternFly) is accessible via mouse, keyboard, and other assistive technologies like screen readers. -- Providing an accessible name to the `` component, if its default role of "application" is kept or if it is given another semantic role that requires an accessible name. -- Due to the nature of React Flow and howw you are able to click and drag nodes, if your draggable nodes contain other actions inside of them (kebab toggles, links, other action buttons), you should ensure those actions are large enough to prevent misclicks. - - [WCAG 2.5.8 - Target size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum) requires at least 24z24 CSS pixels. While they also state exceptions, because a React Flow node itself can be clicked for some action, you should aim for sticking to this minimum, especially if implementing an action where clicking a node quickly can open a details drawer. -- In general ensure that any actions that can be taken via mouse only can be taken via keyboard as well, whether that be actions inside a node or being able to drag a node around to reposition it. - - Dragging nodes via keyboard should be built into React Flow itself out of the box, but always double check in case. \ No newline at end of file +Additionally, you should align with the following practices: + +- Provide an accessible name to the `` component, if its default role of "application" is kept or if it is given another semantic role that requires an accessible name. +- Because React Flow supports node clicking and dragging, ensure that actions within draggable nodes are large enough to prevent misclicks (for example, kebab toggles, links, or other action buttons). + - [WCAG 2.5.8: Target size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum) requires targets to be at least 24 by 24 CSS pixels. While there are exceptions, you should still aim for this minimum because a React Flow node itself can be clicked for some actions. This is especially important for an action like opening a details drawer upon a quick click to a node. +- Ensure that any actions that can be taken via mouse only can be taken via keyboard as well, including all actions within a node and node repositioning via dragging. + - Dragging nodes via keyboard should be built into React Flow itself by default, but always double check to confirm. \ No newline at end of file