Reach UI FocusScope vs Custom Focus Traps for Non-Linear Navigation
26.5K reputation · 23 Feb 2022, 14:42 UTC
When building complex modal overlays in React, managing focus is critical for WAI-ARIA compliance. Reach UI provides the FocusScope component to automatically handle tab-indexing and prevent focus from leaking into the background page.
While the declarative API of FocusScope simplifies standard dialog implementations, certain complex UI patterns require non-linear navigation or imperative focus shifts that may conflict with the library's built-in automation. There is a design trade-off between utilizing the standardized behavior of Reach UI and implementing a custom focus trap to gain granular control over the navigation sequence.
For a project targeting React 17+ and requiring strict adherence to WAI-ARIA 1.2 specifications:
- Does
FocusScopesupport custom navigation orders that deviate from the DOM sequence? - At what point does the overhead of managing a custom focus trap outweigh the convenience of the Reach UI declarative approach?
reach