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

Transcript

1. ⚡ When Virtual DOM Diffing Is a Little Too Clever by Diana MacDonald
2. - Designer - Team Lead - Design Systems - Author - Coder Diana MacDonald @DiDoesDigital
3. - Designer - Team Lead - Design Systems - Author - Coder Diana MacDonald @DiDoesDigital
8. Today - Virtual DOM diffing - Screen readers - ARIA live regions - aria-atomic - Double announcer regions - Web Speech API
9. Virtual DOM
10. Virtual DOM
11. Change Detection
12. Incremental DOM
13. Actual DOM: Elements
14. Actual DOM: Console
15. Virtual DOM div p div #text #comment
16. img #text Virtual DOM: diffing
17. Virtual DOM: final state img div p div #comment
18. Screen readers
23. ARIA live regions
25. <div aria-live="polite"> {message} </div>
26. <div aria-live="assertive"> {message} </div>
27. <div aria-live="polite"> {message} </div>
28. Announcing dynamic changes
29. <div aria-live="polite"> {this.state.message} </div> <Schedule> {this.state.value} </Schedule> Rendering ARIA live (this could work) #
30. Rendering ARIA live (this won't work!) <Schedule> {newMessage ? <div aria-live="polite"> {this.state.message} </div> : null} </Schedule> $
31. aria-atomic="true"
32. <div aria-live="polite"> {message} </div>
33. <div aria-live="polite" aria-atomic="true"> {message} </div>
34. <div aria-live="polite"> The estimated time of arrival is 2.30pm. </div>
35. <div aria-live="polite"> The estimated time of arrival is 2.40pm. </div>
36. <div aria-live="polite"> The estimated time of arrival is 2.40pm. There's been a delay. </div>
37. <div aria-live="polite" aria-atomic="true"> The estimated time of arrival is 2.40pm. There's been a delay. </div>
38. Virtual DOM + aria-atomic
39. <div aria-live="polite" aria-atomic="true"> The estimated time of arrival is {time}. {delayMessage} </div>
40. <div aria-live="polite" aria-atomic="true"> The estimated time of arrival is {time}. {delayMessage} </div>
41. <div aria-live="polite"> The estimated time of arrival is 2.40pm. There's been a delay. </div>
42. Double announcers
43. <div aria-live="polite"> {message1} </div>
44. <div aria-live="polite"> {message1} </div> <div aria-live="polite"> {message2} </div>
45. <div aria-live="polite"> </div> <div aria-live="polite"> </div>
46. <div aria-live="polite"> The estimated time of arrival is 2.30pm. </div> <div aria-live="polite"> </div>
47. <div aria-live="polite"> </div> <div aria-live="polite"> The estimated time of arrival is 2.40pm. There's been a delay. </div>
48. <div aria-live="polite"> Cancelled. Find alternative transport. </div> <div aria-live="polite"> </div>
49. https://github.com/dequelabs/ngA11y https://github.com/AlmeroSteyn/react-aria-live https://github.com/Jinjiang/vue-a11y-utils Double announcer packages
50. Test
51. DIVs for everything <div className="list"> <div className="list-item"></div> <div className="list-item"></div> </div> $
52. <ul> <li></li> <li></li> </ul> Semantic markup #
53. CSS animations (written without React) .my-node-enter { opacity: 1; transition: opacity 200ms; } .my-node-exit { opacity: 0; transition: opacity 200ms; } $
54. .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) #
55. <NotifyWithDoubleAnnouncer> {message} </NotifyWithDoubleAnnouncer>
56. {showNotification ? <NotifyWithDoubleAnnouncer> {message} </NotifyWithDoubleAnnouncer> : null } $
57. Web Speech API: speech synthesis
60. let synth = window.speechSynthesis; if (window.SpeechSynthesisUtterance) { let utterThis = new SpeechSynthesisUtterance("notevole"); synth.speak(utterThis); }
61. let synth = window.speechSynthesis; if (window.SpeechSynthesisUtterance) { let utterThis = new SpeechSynthesisUtterance("notevole"); synth.speak(utterThis); }
63. Constraints and creativity
64. 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