From 656030bf6a152bc82fded0cdcf7b7fd553d31c84 Mon Sep 17 00:00:00 2001
From: Robert Komaromi <robertkomaromi@gmail.com>
Date: Mon, 14 May 2018 17:43:07 -0400
Subject: [PATCH 1/2] Update todo-list-example for a11y

---
 src/v2/guide/list.md | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md
index c30817fabb..a9dbc60b23 100644
--- a/src/v2/guide/list.md
+++ b/src/v2/guide/list.md
@@ -489,11 +489,14 @@ Here's a complete example of a simple todo list:
 
 ``` html
 <div id="todo-list-example">
-  <input
-    v-model="newTodoText"
-    v-on:keyup.enter="addNewTodo"
-    placeholder="Add a todo"
-  >
+  <form v-on:submit.prevent="addNewTodo">
+    <input
+      aria-label="Write a new todo item"
+      placeholder="E.g. Feed the cat"
+      v-model="newTodoText"
+    >
+    <button>Add</button>
+  </form>
   <ul>
     <li
       is="todo-item"
@@ -513,7 +516,7 @@ Vue.component('todo-item', {
   template: '\
     <li>\
       {{ title }}\
-      <button v-on:click="$emit(\'remove\')">X</button>\
+      <button v-on:click="$emit(\'remove\')">Remove</button>\
     </li>\
   ',
   props: ['title']
@@ -553,11 +556,14 @@ new Vue({
 
 {% raw %}
 <div id="todo-list-example" class="demo">
-  <input
-    v-model="newTodoText"
-    v-on:keyup.enter="addNewTodo"
-    placeholder="Add a todo"
-  >
+  <form v-on:submit.prevent="addNewTodo">
+    <input
+      aria-label="Write a new todo item"
+      placeholder="E.g. Feed the cat"
+      v-model="newTodoText"
+    >
+    <button>Add</button>
+  </form>
   <ul>
     <li
       is="todo-item"
@@ -573,7 +579,7 @@ Vue.component('todo-item', {
   template: '\
     <li>\
       {{ title }}\
-      <button v-on:click="$emit(\'remove\')">X</button>\
+      <button v-on:click="$emit(\'remove\')">Remove</button>\
     </li>\
   ',
   props: ['title']

From f51b019c0f3e2713a36c1579425c129876cc12ca Mon Sep 17 00:00:00 2001
From: Robert Komaromi <robertkomaromi@gmail.com>
Date: Wed, 16 May 2018 17:17:07 -0400
Subject: [PATCH 2/2] Implement review suggestions

 * Use explicit label instead of aria-label
 * Move v-model directive to top for improved readability
---
 src/v2/guide/list.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/v2/guide/list.md b/src/v2/guide/list.md
index a9dbc60b23..3e8396bbf5 100644
--- a/src/v2/guide/list.md
+++ b/src/v2/guide/list.md
@@ -490,10 +490,11 @@ Here's a complete example of a simple todo list:
 ``` html
 <div id="todo-list-example">
   <form v-on:submit.prevent="addNewTodo">
+    <label for="new-todo">Add a todo</label>
     <input
-      aria-label="Write a new todo item"
-      placeholder="E.g. Feed the cat"
       v-model="newTodoText"
+      id="new-todo"
+      placeholder="E.g. Feed the cat"
     >
     <button>Add</button>
   </form>
@@ -557,10 +558,11 @@ new Vue({
 {% raw %}
 <div id="todo-list-example" class="demo">
   <form v-on:submit.prevent="addNewTodo">
+    <label for="new-todo">Add a todo</label>
     <input
-      aria-label="Write a new todo item"
-      placeholder="E.g. Feed the cat"
       v-model="newTodoText"
+      id="new-todo"
+      placeholder="E.g. Feed the cat"
     >
     <button>Add</button>
   </form>