Empathy-Driven Development

on YouTube ↗26m

" summary

A live debugging tour of a React app with three components — login form, card flip, and desktop-style menu — that shows concrete fixes and test coverage: replacing placeholders with visible labels and landmarks, turning hover-only UI into keyboard-focusable buttons with focus management, wiring ARIA roles, and adding modality-aware styling via what-input. Tools used include DevTools, a Chrome extension, Selenium WebDriver plus AX tooling, and Jest/Enzyme; tests run and report pass or fail.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 3:54Login Form
3. 4:06Dynamic Login
4. 6:28Selenium
5. 7:33Card Flip
6. 9:18Card Flip Demo
7. 19:46Desktop Style Menu
8. 25:11Resources

" related talks

• 39mEmpathy-Driven DevelopmentMarcy Sutton Todd · Uphill Conf 2018
• 27mCompassion-Driven Development: Building Accessible React UITae’lur Alexis · React Day Berlin 2019
• 48mRadically Accessible Internet Applications 💯Marcy Sutton Todd · Beyond Tellerrand Munich 2018
• 27mChrome DevTools: State of the Union 2024 - Debugging React & BeyondAddy Osmani · React Summit US 2024
• 12mReact Accessibility: Beyond the BasicsJen Luker · React Summit 2020
• 35mDebugging JS and ReactMark Erikson · React Alicante 2024
• 43mCleaning the Tar: Using React within the Firefox Developer ToolsJames Long · Strange Loop 2015
• 02h 51mEnliven UX with React/ReduxGurudath Reddy · JSConf.Asia 2018