At React Advanced 2025, Aurora Scharff presented Building Interactive Async UI with React 19 and Ariakit
and shared how ARIAKit, an open-source accessibility library, enables developers to build custom UI components that meet WCAG standards without requiring deep accessibility expertise. The presentation showcased a practical approach to combining ARIAKit’s unstyled primitives with modern React patterns to create production-ready, accessible interfaces.
ARIAKit provides unstyled, accessible UI primitives that handle keyboard navigation, screen reader support, and ARIA attributes automatically. The library, which has gained adoption in major projects including WordPress Gutenberg and WooCommerce, follows WAI-ARIA standards while allowing complete styling freedom. Unlike fully styled component libraries, ARIAKit exports composable primitives that developers can customize with any styling solution, including Tailwind CSS.
The speaker illustrated the challenges facing developers who need to implement custom designs while maintaining accessibility. In some countries, WCAG 2 compliance is legally required for public applications, with potential fines for non-compliance. However, many development teams lack dedicated accessibility resources, creating a gap between design requirements and implementation capabilities.
Starting with a non-accessible account selector component, the demonstration showed common accessibility failures including missing keyboard navigation, non-functional escape key handling, and absent screen reader support. The initial implementation relied on generic div elements with manual state management through multiple useState hooks and verbose event handling code.
The transformation to an accessible component involved replacing generic HTML elements with ARIAKit primitives. A SelectProvider component managed the interaction state, while Select, SelectPopover, and SelectItem components provided the structure. ARIAKit automatically applied appropriate ARIA attributes and handled keyboard interactions, including arrow key navigation and focus management.
The presentation highlighted how ARIAKit enables styling through data attributes rather than traditional state management. Instead of managing hover and focus states manually, developers can style components using data-active-item and data-focus-visible attributes that ARIAKit applies automatically. This approach proved particularly valuable for keyboard users, who require higher contrast focus indicators than mouse users.
Integration with React 19 features demonstrated how ARIAKit components work alongside modern async patterns. The speaker used useTransition to coordinate server operations with UI updates, eliminating flickering pending states. The useOptimistic hook provided instant feedback for state changes while maintaining automatic rollback on errors. Server functions replaced traditional API endpoints, simplifying the architecture by allowing direct function calls from client components.
ARIAKit is available as an open-source library under an MIT license, with active development and comprehensive documentation at ariakit.org. The library works with React 17 and above, and its primitives can be installed via npm, yarn, or pnpm package managers.
