Upgrade to Pro — share decks privately, control downloads, hide ads and more …

When Virtual DOM Diffing Is a Little Too Clever

Diana MacDonald
September 10, 2019

When Virtual DOM Diffing Is a Little Too Clever

Virtual DOMs give us an excellent developer experience but their diffing algorithms can have surprising implications. This lightning talk looks at how double announcer regions work to support screen readers and when you might use the Web Speech API instead.

Components Conf, September 2019, Melbourne.

Link: https://didoesdigital.com

Diana MacDonald

September 10, 2019
Tweet

More Decks by Diana MacDonald

Other Decks in Programming

Transcript

  1. - Designer - Team Lead - Design Systems - Author

    - Coder Diana MacDonald @DiDoesDigital
  2. - Designer - Team Lead - Design Systems - Author

    - Coder Diana MacDonald @DiDoesDigital
  3. Today - Virtual DOM diffing - Screen readers - ARIA

    live regions - aria-atomic - Double announcer regions - Web Speech API
  4. Rendering ARIA live (this won't work!) <Schedule> {newMessage ? <div

    aria-live="polite"> {this.state.message} </div> : null} </Schedule> $
  5. CSS animations (written without React) .my-node-enter { opacity: 1; transition:

    opacity 200ms; } .my-node-exit { opacity: 0; transition: opacity 200ms; } $
  6. .my-node-enter { opacity: 0; } .my-node-enter-active { opacity: 1; transition:

    opacity 200ms; } .my-node-exit { opacity: 1; } .my-node-exit-active { opacity: 0; transition: opacity 200ms; } CSS animations (written for React) #
  7. let synth = window.speechSynthesis; if (window.SpeechSynthesisUtterance) { let utterThis =

    new SpeechSynthesisUtterance("notevole"); synth.speak(utterThis); }
  8. let synth = window.speechSynthesis; if (window.SpeechSynthesisUtterance) { let utterThis =

    new SpeechSynthesisUtterance("notevole"); synth.speak(utterThis); }
  9. Questions? Diana MacDonald | @DiDoesDigital HK Grotesk™ is an open

    source sans serif typeface by Hanken Design Co.
 Iosevka is an open source monospace typeface by Belleve Invis See DiDoesDigital.com for the slides and the book