From b3892c2d7ce4084e69da4ea106811e4063cda3b8 Mon Sep 17 00:00:00 2001
From: JP DeVries <mail@devries.jp>
Date: Sat, 12 Nov 2016 01:37:37 +0100
Subject: [PATCH] Screen Reader Accessibility

Closes Thinkful-Ed/shopping-list#4

formatting CSS

no-js friendly strikethrough feature

Making milk checked initially
---
 index.html | 95 +++++++++++++++++++++++++++---------------------------
 main.css   | 27 ++++++++++++++--
 2 files changed, 72 insertions(+), 50 deletions(-)

diff --git a/index.html b/index.html
index fa08eb38..509c1c1c 100644
--- a/index.html
+++ b/index.html
@@ -13,58 +13,57 @@
   <div class="container">
     <h1>Shopping List</h1>
 
-    <form id="js-shopping-list-form">
-      <label for="shopping-list-entry">Add an item</label>
+    <form id="js-shopping-list-add-item">
+      <h2><label for="shopping-list-entry">Add an item</label></h2>
       <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
       <button type="submit">Add item</button>
     </form>
 
-    <ul class="shopping-list">
-      <li>
-        <span class="shopping-item">apples</span>
-        <div class="shopping-item-controls">
-          <button class="shopping-item-toggle">
-            <span class="button-label">check</span>
-          </button>
-          <button class="shopping-item-delete">
-            <span class="button-label">delete</span>
-          </button>
-        </div>
-      </li>
-      <li>
-        <span class="shopping-item">oranges</span>
-        <div class="shopping-item-controls">
-          <button class="shopping-item-toggle">
-            <span class="button-label">check</span>
-          </button>
-          <button class="shopping-item-delete">
-            <span class="button-label">delete</span>
-          </button>
-        </div>
-      </li>
-      <li>
-        <span class="shopping-item shopping-item__checked">milk</span>
-        <div class="shopping-item-controls">
-          <button class="shopping-item-toggle">
-            <span class="button-label">check</span>
-          </button>
-          <button class="shopping-item-delete">
-            <span class="button-label">delete</span>
-          </button>
-        </div>
-      </li>
-      <li>
-        <span class="shopping-item">bread</span>
-        <div class="shopping-item-controls">
-          <button class="shopping-item-toggle">
-            <span class="button-label">check</span>
-          </button>
-          <button class="shopping-item-delete">
-            <span class="button-label">delete</span>
-          </button>
-        </div>
-      </li>
-    </ul>
+    <form id="js-shopping-list-form">
+      <ul class="shopping-list">
+        <li id="apples">
+          <h3 class="shopping-item">
+            <input type="checkbox" id="apples__completed" name="apples__completed">
+            <label for="apples__completed">apples</label>
+          </h3>
+          <div class="shopping-item-controls">
+            <label for="apples__deleted">Delete<span class="visually-hidden"> apples</span></label>
+            <input type="checkbox" id="apples__deleted" name="apples__deleted">
+          </div>
+        </li>
+        <li id="oranges">
+          <h3 class="shopping-item">
+            <input type="checkbox" id="oranges__completed" name="oranges__completed">
+            <label for="oranges__completed">oranges</label>
+          </h3>
+          <div class="shopping-item-controls">
+            <label for="oranges__deleted">Delete<span class="visually-hidden"> oranges</span></label>
+            <input type="checkbox" id="oranges__deleted" name="oranges__deleted">
+          </div>
+        </li>
+        <li id="milk">
+          <h3 class="shopping-item">
+            <input type="checkbox" id="milk__completed" name="milk__completed" checked>
+            <label for="milk__completed">milk</label>
+          </h3>
+          <div class="shopping-item-controls">
+            <label for="milk__deleted">Delete<span class="visually-hidden"> milk</span></label>
+            <input type="checkbox" id="milk__deleted" name="milk__deleted">
+          </div>
+        </li>
+        <li id="bread">
+          <h3 class="shopping-item">
+            <input type="checkbox" id="bread__completed" name="bread__completed">
+            <label for="bread__completed">bread</label>
+          </h3>
+          <div class="shopping-item-controls">
+            <label for="bread__deleted">Delete<span class="visually-hidden"> bread</span></label>
+            <input type="checkbox" id="bread__deleted" name="bread__deleted">
+          </div>
+        </li>
+      </ul>
+      <button type="button" name="button">Trash Deleted Items</button>
+    </form>
   </div>
 
 </body>
diff --git a/main.css b/main.css
index 785bdb1e..653b1c0f 100644
--- a/main.css
+++ b/main.css
@@ -1,3 +1,15 @@
+.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    padding:0 !important;
+    border:0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
+}
+body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }
+
 * {
   box-sizing: border-box;
 }
@@ -18,6 +30,13 @@ button:hover {
   width: 250px;
 }
 
+#js-shopping-list-add-item h2 {
+  display: inline-block;
+  margin: 0;
+  font-size: 1em;
+  font-weight: normal;
+}
+
 .container {
   max-width: 600px;
   margin: 0 auto;
@@ -34,14 +53,18 @@ button:hover {
   padding: 20px;
 }
 
+.shopping-list > li:target {
+  background: #f9ec8f;
+}
+
 .shopping-item {
   display: block;
   color: grey;
   font-style: italic;
   font-size: 20px;
-  margin-bottom: 15px;
+  margin: 0 0 15px 0;
 }
 
-.shopping-item__checked {
+input[type="checkbox"]:checked + label {
   text-decoration: line-through;
 }
\ No newline at end of file