chore(ReactFlow): updated guidance for a11y #4897
Open
+15
−2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
nicolethoen
approved these changes
Dec 18, 2025
edonehoo
requested changes
Dec 18, 2025
|
|
||
| ### 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: |
Collaborator
There was a problem hiding this comment.
Suggested change
| 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. | |
| Additionally, you should align with the following practices: |
| 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 `<ReactFlow>` 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| - 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. | |
| - 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). |
|
|
||
| - Providing an accessible name to the `<ReactFlow>` 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| - [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. | |
| - [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. |
|
|
||
| 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 `<ReactFlow>` component, if its default role of "application" is kept or if it is given another semantic role that requires an accessible name. |
Collaborator
There was a problem hiding this comment.
Suggested change
| - Providing an accessible name to the `<ReactFlow>` component, if its default role of "application" is kept or if it is given another semantic role that requires an accessible name. | |
| - Provide an accessible name to the `<ReactFlow>` component, if its default role of "application" is kept or if it is given another semantic role that requires an accessible name. |
| - Providing an accessible name to the `<ReactFlow>` 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| - 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. | |
| - 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. |
| - 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. |
Collaborator
There was a problem hiding this comment.
Suggested change
| - Dragging nodes via keyboard should be built into React Flow itself out of the box, but always double check in case. | |
| - Dragging nodes via keyboard should be built into React Flow itself by default, but always double check to confirm. |
thatblindgeye
force-pushed
the
reactFlowGuidance
branch
from
b60cf85 to
ca7d7aa
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.