A11y: The focus order does not match the visual position
Please describe the feature that you want to propose
Hi, thank you for maintaining an awesome library. I really love its intuitive APIs and interfaces.
Recently, our team conducted an accessibility test against our company's products, and we discovered some obstacles for screen readers. We noticed that some of the problems we discovered originated from React Flow.
One of the most critical issues we observed is that the order of elements we can focus on via both Tab or Arrows does not match the visual position of the elements:
https://github.com/user-attachments/assets/6b7f3843-e593-414b-9afc-07a27e958e62
As you can see on the clip, it focuses edges first and the nodes last. It would be great if we could focus on nodes and their belonging edges first, and then move the sibling nodes, which is the same as the experience it offers to visual users.
I believe this violates 2.4.3 Focus Order from WCAG 2.1. It is one of the Level A criteria, the ones that have the most significant impact on users who need assistive technology.
I recorded the video with VoiceOver in macOS 15.3.2 and the latest Chrome.
Source: xyflow/xyflow