Where in the Stack is Carmen Sanfrancisco?
summary
Concrete debugging steps and test tools not platitudes Focus fails in IE + JAWS because a third party AUI dropdown renders visibility after the focus call so the fix is to wrap focus in a React render callback or replace the control with a real button or anchor with href to be natively focusable Axe core audits work in CI if you shim window and document in Node or run against a real browser Enzyme tests need an attached DOM so use enzyme.mount with attached and phantomjs or selenium webdriver for fuller platform coverage and react-axe gives fast in-browser feedback.
AI-written summary · about
chapters (41)
- 0:00Intro
- 1:15Welcome
- 1:41Reporting for duty
- 2:11A place in the stack
- 2:21Browser context
- 2:42Accessibility issues
- 3:00React menu
- 3:31React component
- 4:10Dropdown event listener
- 4:40Expert witness
- 5:01Possible causes
- 6:56The real fix
- 8:21Accessibility inspiration
- 9:40Gumshoes
- 9:56Whats happening under the hood
- 10:14Alice Vance
- 12:48Accessibility Node Inspector
- 13:47Conclusion
- 14:08Hot Tip
- 14:30Accessibility Testing API
- 15:29Accessibility Checks
- 15:59Node List Interface
- 16:12My Labradoodle
- 16:31Running in a Browser
- 17:30Browser Objects
- 18:11Audit Results
- 18:46React Context
- 20:45Unit Tests
- 21:14Accessibility Tests
- 21:41Jesse Beach
- 21:58Testing
- 23:23Test Helper
- 24:03Le Helper
- 25:18Why Check
- 25:39React X Overview
- 27:05React Tax Overview
- 29:13Check for Accessibility
- 29:29Accessibility API
- 29:48Shim Global Browser Objects
- 30:13Test Accessibility
- 30:39ReactX
related talks
12mReact Accessibility: Beyond the Basics
26mEmpathy-Driven Development
25mBuilding Inclusive Web Experiences: Web Accessibility in ReactJS
48mRadically Accessible Internet Applications 💯
52mA11y with React Components
27mCompassion-Driven Development: Building Accessible React UI
11mInclusive React: A Survival Guide
27mA11y And React, Why Is It Important?