Design System Carnival! One accessible component, many pretty masks
summary
Builds a single reusable, accessible disclosure widget that can masquerade as tooltip, popover, dropdown menu or embedded search and demonstrates real code: React hooks (useState/useRef/useEffect), ARIA attributes (aria-expanded / aria-haspopup / aria-label), focus management (Escape returns focus, click‑outside closes, optional roving focus), and icon handling via Font Awesome SVG with aria-hidden. Demos mostly work; one ref‑forwarding bug breaks a menu demo, showing how quickly masks tangle when extra behaviors get grafted on.
AI-written summary · about
chapters (12)
- 0:00Welcome
- 2:08Design System Carnival
- 7:12Design Systems metaphor
- 11:46Disclosure widget foundation
- 17:33Focus states for accessibility
- 21:06Click and escape management
- 23:12Toggle tips with icons
- 26:45Search forms with disclosure
- 31:02Disclosure widget pitfalls
- 32:49Live demo
- 42:55Avoiding mask anti-patterns
- 43:36Conclusion and key takeaways
related talks
30mDesign Systems are a Carnival! One Accessible Component, Many Pretty Masks
40mAccessibility-flavored React components make your design system delicious
50mAccessibility-flavored React components...
24mCode crimes for good component APIs
25mAccessibility in the Age of Components
40mBuilding Accessible Reusable Components
48mRadically Accessible Internet Applications 💯
42mReusable Widgets That Work!