Toolkit for building accessible UIs
summary
Reakit claims to inject real accessible behavior into existing components: a useButton hook that adds keyboard focus and Enter/Space activation, render-props and component-injection via the as prop, and an open/closed component pattern so unstyled widgets become composable. Demo fixes a div-button so focus returns after modal close. It combines with menu/combo components, works with React.memo, and is tested with integration tests plus VoiceOver NVDA and JAWS checks.
AI-written summary · about
chapters (20)
- 0:00Accessibility issues
- 0:48Composition strategies
- 1:33Reactive library overview
- 2:17Open-close principle
- 2:59Component modification
- 4:28Style extension
- 5:00Component hooks
- 6:16Combining hooks
- 7:01Hooks pros and cons
- 8:41Render props technique
- 9:44Render props analysis
- 10:32Performance optimization
- 12:23Memoization challenges
- 13:27Component injection
- 14:08Component injection pros
- 15:39Component injection cons
- 17:11Prop collisions
- 18:50Approach comparison
- 20:43Agnostic composition
- 22:58Q&A session
related talks
40mBuilding Accessible Reusable Components
34mBuilding Accessible Components in React
42mReusable Widgets That Work!
23m12 Tips For More Accessible React Apps
34mBuilding Accessible Web Apps in React
40mAccessibility-flavored React components make your design system delicious
48mRadically Accessible Internet Applications 💯
35mBuilding reusable UI libraries with React