tutorial step 7/8: improve a11y, teach better practices (#1592)

* tutorial step 7: improve a11y, teach better practices

it's easier, and more accessible, to handle a single submit event on a form than it is to handle both click on button and enter keydown on input

* use form and submit handler in tutorial step 8

Co-authored-by: Natalia Tepluhina <[email protected]>

Author: WickyNilliams

src/tutorial/src/step-7/App/template.html

@@ -1,5 +1,7 @@
-<input v-model="newTodo" @keyup.enter="addTodo">
-<button @click="addTodo">Add Todo</button>
+<form @submit.prevent="addTodo">
+  <input v-model="newTodo">
+  <button>Add Todo</button>    
+</form>
 <ul>
   <li v-for="todo in todos" :key="todo.id">
     {{ todo.text }}

src/tutorial/src/step-8/App/template.html

@@ -1,5 +1,7 @@
-<input v-model="newTodo" @keyup.enter="addTodo">
-<button @click="addTodo">Add Todo</button>
+<form @submit.prevent="addTodo">
+  <input v-model="newTodo" />
+  <button>Add Todo</button>
+</form>
 <ul>
   <li v-for="todo in todos" :key="todo.id">
     <input type="checkbox" v-model="todo.done">

src/tutorial/src/step-8/_hint/App/template.html

@@ -1,5 +1,7 @@
-<input v-model="newTodo" @keyup.enter="addTodo">
-<button @click="addTodo">Add Todo</button>
+<form @submit.prevent="addTodo">
+  <input v-model="newTodo" />
+  <button>Add Todo</button>
+</form>
 <ul>
   <li v-for="todo in filteredTodos" :key="todo.id">
     <input type="checkbox" v-model="todo.done">