Accessible Components with State Machines and Zag (with Segun Adebayo) | Some Antics

Zag is a collection of finite-state machine-powered UI component patterns that can be used to build design systems for your framework of choice, built by Segun Adebayo, creator of the Chakra UI component library. Join us as Segun shows us how finite-state machines and Zag can empower us to build accessible UI components!

Broadcasted live on Twitch on July 5, 2022. Watch future streams live at   / someanticsdev  .

Transcript and links at: https://someantics.dev/zag/

Follow Segun on Twitter at   / thesegunadebayo  
Follow Zag on Twitter at   / zag_js  

#a11y #StateMachines #WebDevelopment

---

Mentioned Links:
• Zag homepage: https://zagjs.com
• MDN docs for range inputs: https://developer.mozilla.org/en-US/d...
• View the statechart on Excalidraw: https://excalidraw.com/#json=Dqusg_YW...
• "How (Not) to Build a Button" from Ben's blog: https://benmyers.dev/blog/clickable-d...
• "aria-label, aria-labelledby, and aria-describedby: What's the Difference?" on Ben's blog: https://benmyers.dev/blog/aria-labels...
• "What is ARIA?" on Ben's blog: https://benmyers.dev/blog/aria/
• Zag's introduction docs: https://zagjs.com/overview/introduction
• Zag's `Slider` React component docs: https://zagjs.com/components/react/sl...
• Some Antics: Build an Accessible App with SolidJS (with Dan Jutan): /accessible-solidjs-app/
• `Slider` state machine visualization: https://state-machine-viz.vercel.app/...

---

00:00:00 Introductions
00:01:14 Why Zag?
00:05:50 What Made State Machines the Missing Piece?
00:08:47 Slider Discovery Phase
00:16:38 Drawing the Slider Statechart
00:27:36 Implementing the Slider Machine
00:44:23 Building the Slider UI
00:53:47 Wiring the UI to Our Machine with useMachine()
01:03:21 Zag Components
01:07:46 Wrapping Up