Improve accessibility (#36)

Author: esganzerla

index.css

@@ -33,10 +33,6 @@ body {
 	font-weight: 300;
 }
 
-:focus {
-	outline: 0;
-}
-
 .hidden {
 	display: none;
 }
@@ -51,19 +47,19 @@ body {
 
 .todoapp input::-webkit-input-placeholder {
 	font-style: italic;
-	font-weight: 300;
+	font-weight: 400;
 	color: rgba(0, 0, 0, 0.4);
 }
 
 .todoapp input::-moz-placeholder {
 	font-style: italic;
-	font-weight: 300;
+	font-weight: 400;
 	color: rgba(0, 0, 0, 0.4);
 }
 
 .todoapp input::input-placeholder {
 	font-style: italic;
-	font-weight: 300;
+	font-weight: 400;
 	color: rgba(0, 0, 0, 0.4);
 }
 
@@ -100,6 +96,7 @@ body {
 
 .new-todo {
 	padding: 16px 16px 16px 60px;
+	height: 65px;
 	border: none;
 	background: rgba(0, 0, 0, 0.003);
 	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
@@ -122,25 +119,29 @@ body {
 }
 
 .toggle-all + label {
-	width: 60px;
-	height: 34px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 45px;
+	height: 65px;
 	font-size: 0;
 	position: absolute;
-	top: -52px;
-	left: -13px;
-	-webkit-transform: rotate(90deg);
-	transform: rotate(90deg);
+	top: -65px;
+	left: -0;
 }
 
 .toggle-all + label:before {
 	content: '❯';
+	display: inline-block;
 	font-size: 22px;
-	color: #e6e6e6;
+	color: #949494;
 	padding: 10px 27px 10px 27px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
 }
 
 .toggle-all:checked + label:before {
-	color: #737373;
+	color: #484848;
 }
 
 .todo-list {
@@ -198,13 +199,13 @@ body {
 		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
 		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
 	*/
-	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
 	background-repeat: no-repeat;
 	background-position: center left;
 }
 
 .todo-list li .toggle:checked + label {
-	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
 }
 
 .todo-list li label {
@@ -214,11 +215,11 @@ body {
 	line-height: 1.2;
 	transition: color 0.4s;
 	font-weight: 400;
-	color: #4d4d4d;
+	color: #484848;
 }
 
 .todo-list li.completed label {
-	color: #cdcdcd;
+	color: #949494;
 	text-decoration: line-through;
 }
 
@@ -232,17 +233,20 @@ body {
 	height: 40px;
 	margin: auto 0;
 	font-size: 30px;
-	color: #cc9a9a;
-	margin-bottom: 11px;
+	color: #949494;
 	transition: color 0.2s ease-out;
 }
 
-.todo-list li .destroy:hover {
-	color: #af5b5e;
+.todo-list li .destroy:hover,
+.todo-list li .destroy:focus {
+	color: #C18585;
 }
 
 .todo-list li .destroy:after {
 	content: '×';
+	display: block;
+	height: 100%;
+	line-height: 1.1;
 }
 
 .todo-list li:hover .destroy {
@@ -312,18 +316,18 @@ body {
 }
 
 .filters li a:hover {
-	border-color: rgba(175, 47, 47, 0.1);
+	border-color: #DB7676;
 }
 
 .filters li a.selected {
-	border-color: rgba(175, 47, 47, 0.2);
+	border-color: #CE4646;
 }
 
 .clear-completed,
 html .clear-completed:active {
 	float: right;
 	position: relative;
-	line-height: 20px;
+	line-height: 19px;
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -378,3 +382,11 @@ html .clear-completed:active {
 		bottom: 10px;
 	}
 }
+
+:focus,
+.toggle:focus + label,
+.toggle-all:focus + label {
+	box-shadow: 0 0 2px 2px #CF7D7D;
+	outline: 0;
+	z-index: 3;
+}