Improve accessibility (#2)

README.md

@@ -1,4 +1,4 @@
-# TodoMVC in less than 100 lines of vanilla JavaScript
+# TodoMVC in ~100 lines of vanilla JavaScript
 
 Or: How I Learned to Stop Worrying and Love the DOM
 
@@ -119,7 +119,7 @@ What are some other advantages of storing data in the DOM? For one, remember tha
 
 ## The result
 
-To experiment with this approach, I made a [TodoMVC](https://todomvc.com) implementation. It contains only 98 lines of code in vanilla JavaScript, which is 1kb minified and gzipped.
+To experiment with this approach, I made a [TodoMVC](https://todomvc.com) implementation. It contains only 101 lines of code in vanilla JavaScript, which is 1kb minified and gzipped.
 
 But I'm cheating a little with that number. Because some bits aren't implemented with JavaScript at all. For example, filtering items by completion state is done using just CSS:
 

index.html

@@ -134,7 +134,7 @@ <h1>todos</h1>
         <input type="text" placeholder="What needs to be done?" autofocus>
         <div id="toggle-all" role="checkbox" aria-checked="false" tabindex="0" title="Mark all as complete" hidden><div aria-hidden="true" style="font-size: 22px; transform: rotate(90deg)">❯</div></div>
     </form>
-    <div id="todos"></div>
+    <div id="todos" role="list"></div>
     <form id="footer" hidden>
         <div style="flex: 1 1 0" id="count"></div>
         <div id="filters">
@@ -228,9 +228,12 @@ <h1>todos</h1>
     #root = this.attachShadow({ mode: 'closed' })
     constructor() {
         super()
+        this.attachInternals().role = 'listitem'
         const template = document.querySelector('#todo-item-template')
         this.#root.append(template.content.cloneNode(true))
 
+        this.#root.querySelector('#checkbox').addEventListener('keydown', e =>
+            e.key === ' ' ? (e.preventDefault(), e.target.click()) : null)
         this.#root.querySelector('#checkbox').addEventListener('click', () => {
             if (this.hasAttribute('completed')) this.removeAttribute('completed')
             else this.setAttribute('completed', '')