reach/reach-ui
Reach Ui
Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for building design systems and interactive user interfaces. It is an accessibility-first toolkit that handles core concerns like ARIA attributes, focus management, and screen reader support automatically, without requiring developer configuration.
The library is built as a collection of standalone packages, each managing its own lifecycle and dependencies, enabling granular adoption and tree-shaking. Components use a polymorphic rendering pattern, accepting an as prop to render as any HTML element or custom component while preserving accessibility attributes and event bindings. Internal state and interactions are managed through custom React hooks, isolating logic from rendering for testability and reuse.
Reach UI provides a comprehensive focus management system that controls and tracks keyboard focus within interactive elements, particularly in modals, menus, and complex widgets. It includes a keyboard-event delegation system that maps standard navigation patterns like arrow keys and tab stops to component actions, and a screen-reader announcement bus that broadcasts state changes to assistive technologies without visual disruption. The library also implements focus-trap and focus-restore mechanisms to contain focus within modals and dialogs, restoring it to the triggering element on close.