Label for search field

Fixes #572

Author: philwareham

dist/four-point-eight/forms/misc/search_input.txp

@@ -2,6 +2,7 @@
     <meta itemprop="url" content="<txp:site_url />">
     <form role="search" method="get" action="<txp:site_url />" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
         <meta itemprop="target" content="<txp:site_url />?q={q}">
-        <input name="q" type="search" itemprop="query-input" placeholder="<txp:text item="search" />"<txp:if_search> value="<txp:search_term />"</txp:if_search>>
+        <label class="accessibility" for="search"><txp:text item="search" /></label>
+        <input id="search" name="q" type="search" itemprop="query-input" placeholder="<txp:text item="search" />"<txp:if_search> value="<txp:search_term />"</txp:if_search>>
     </form>
 </div>

dist/four-point-eight/styles/default.css

@@ -172,6 +172,25 @@ nav ol::after,
     word-wrap: break-word;
   }
 
+  /**
+   * Hide text but still allow screen reader access.
+   *
+   * Example HTML:
+   *
+   * <p class="accessibility">
+   */
+  .accessibility {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+    white-space: nowrap;
+  }
+
   /* Navigation
      ========================================================================== */
   /**

src/dev-docs/mockup-rtl.html

@@ -33,7 +33,8 @@ <h3>My site slogan</h3>
                 <meta itemprop="url" content="https://example.com/">
                 <form role="search" method="get" action="#" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
                     <meta itemprop="target" content="https://example.com/?q={q}">
-                    <input name="q" type="search" itemprop="query-input" placeholder="Search">
+                    <label class="accessibility" for="search"><txp:text item="search" /></label>
+                    <input id="search" name="q" type="search" itemprop="query-input" placeholder="Search">
                 </form>
             </div>
         </div>

src/dev-docs/mockup.html

@@ -33,7 +33,8 @@ <h3>My site slogan</h3>
                 <meta itemprop="url" content="https://example.com/">
                 <form role="search" method="get" action="#" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
                     <meta itemprop="target" content="https://example.com/?q={q}">
-                    <input name="q" type="search" itemprop="query-input" placeholder="Search">
+                    <label class="accessibility" for="search"><txp:text item="search" /></label>
+                    <input id="search" name="q" type="search" itemprop="query-input" placeholder="Search">
                 </form>
             </div>
         </div>

src/scss/modules/_layout.scss

@@ -119,3 +119,24 @@ body {
     /* 1 */
     word-wrap: break-word;
 }
+
+/**
+ * Hide text but still allow screen reader access.
+ *
+ * Example HTML:
+ *
+ * <p class="accessibility">
+ */
+
+.accessibility {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0); // TODO: Deprecated, use `clip-path` when IE11 dropped.
+    //clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+}

src/templates/forms/misc/search_input.txp

@@ -2,6 +2,7 @@
     <meta itemprop="url" content="<txp:site_url />">
     <form role="search" method="get" action="<txp:site_url />" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
         <meta itemprop="target" content="<txp:site_url />?q={q}">
-        <input name="q" type="search" itemprop="query-input" placeholder="<txp:text item="search" />"<txp:if_search> value="<txp:search_term />"</txp:if_search>>
+        <label class="accessibility" for="search"><txp:text item="search" /></label>
+        <input id="search" name="q" type="search" itemprop="query-input" placeholder="<txp:text item="search" />"<txp:if_search> value="<txp:search_term />"</txp:if_search>>
     </form>
 </div>