Design system and accessibility
summary
Announces a reusable behavior layer called react-aria with separate state and behavior hooks (published alongside react-stately and react-spectrum), built over a year and a half and open sourcing soon. Demonstrates concrete fixes: a11y keyboard and screen-reader patterns for custom selects, hidden native select for autofill, normalized press/focus across devices with the usePress and focus hooks, virtualized collections handling focus, and internationalization supporting over 30 languages.
AI-written summary · about
chapters (12)
- 0:00Adobe's design system journey
- 1:00The challenge of technical debt
- 2:20Why the web platform is unique
- 4:20Defining adaptive UI
- 5:02Complexities of a custom select
- 8:34Introducing react aria
- 10:07Library architecture
- 12:45Handling browser interactions
- 17:04Accessibility with ARIA
- 17:49Collection components
- 19:30Building a custom switch
- 23:30Q&A and open sourcing
related talks
26mDemystifying Accessibility in React Apps
41mDemystifying Accessibility in React Apps
40mAccessibility-flavored React components make your design system delicious
16mDemystifying accessibility in React apps
50mAccessibility-flavored React components...
36mAccessibility in React Application
34mBuilding Accessible Components in React
49mSupporting accessibility in React: the difficulties and niceties