Switch from `<span>` to `<label>` as the todo text wrapper, since it's the label to the checkbox

template/css/app.css

@@ -78,7 +78,7 @@ body {
 	border-bottom: none;
 }
 
-#todo-list li.done span {
+#todo-list li.done label {
 	color: #777777;
 	text-decoration: line-through;
 }
@@ -86,7 +86,7 @@ body {
 #todo-list li .destroy {
 	display: none;
 	position: absolute;
-	top: 16px;
+	top: 20px;
 	right: 10px;
 	cursor: pointer;
 	width: 20px;
@@ -119,7 +119,7 @@ body {
 	display: none;
 }
 
-#todo-list li .view span {
+#todo-list li .view label {
 	word-break: break-word;
 }
 

template/index.html

@@ -19,7 +19,7 @@
 				<li class="done">
 					<div class="view">
 						<input class="toggle" type="checkbox" checked>
-						<span>Create a TodoMVC template</span>
+						<label>Create a TodoMVC template</label>
 						<a class="destroy"></a>
 					</div>
 					<input class="edit" type="text" value="Create a TodoMVC template">
@@ -27,7 +27,7 @@
 				<li>
 					<div class="view">
 						<input class="toggle" type="checkbox">
-						<span>Rule the web</span>
+						<label>Rule the web</label>
 						<a class="destroy"></a>
 					</div>
 					<input class="edit" type="text" value="Rule the web">