feat(search): Apply new styling to search bars #284

Add accessibility features to search bars.
HistoryAtState · Nov 13, 2017 · 61976ac · 61976ac
1 parent 174c2c4
commit 61976ac
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/app/scss/_customized-bootstrap.scss b/app/scss/_customized-bootstrap.scss
@@ -322,3 +322,7 @@ a[href ^='https://']:after {
     color: $hsg-link-color-hover;
   }
 }
+
+.form-control {
+  box-shadow: none;
+}
diff --git a/app/scss/_search.scss b/app/scss/_search.scss
@@ -3,6 +3,11 @@
 // TODO: Refactor confusing wording for class ".searchbox"
 // and ID "#searchbox". Each is affecting either wrapper or input element.
 
+input[type=search] {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+}
+
 .searchbox {
   position: relative;
   margin-top: 10px;
@@ -18,13 +23,13 @@
 
 .search-button {
   position: absolute;
-  top: 1px;
-  right: 1px;
+  top: 0;
+  right: 0;
   z-index: 1;
-  border: none !important;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  background: $color-gray-lightest;
+  border: 1px solid $color-primary-darker;
+  background: $color-primary-darker;
   width: auto;
 }
 

diff --git a/app/templates/site.html b/app/templates/site.html
@@ -44,8 +44,8 @@
                                         <p class="form-group">
                                             <!-- Search: -->
                                             <input type="text" size="15" name="q" placeholder="Search..." class="form-control" id="search-box"/>
-                                            <button type="submit" value="GO" class="search-button btn btn-default">
-                                                <i class="hsg-search-button-icon"/>
+                                            <button type="submit" class="hsg-link-button search-button btn">
+                                                <i class="hsg-search-button-icon"></i>
                                             </button>
                                         </p>
                                     </form>

diff --git a/pages/search/index.html b/pages/search/index.html
@@ -18,15 +18,17 @@
         <div class="hsg-width-one-whole">
             <div id="content-inner" data-template="app:fix-links">
                 <h1>Search</h1>
-                <section class="hsg-search-section">
+                <section class="hsg-search-section" role="search">
                     <p>Read these <a href="$app/search/tips">tips and caveats</a> to understand the
                         limitations of this search engine and how to make the most of its scope,
                         phrase, boolean, wildcard, and proximity options.
                     </p>
                     <form method="get" action="$app/search">
-                        <p class="form-group">
-                            <input type="text" name="q" placeholder="Search..." class="form-control"
-                                id="q" data-template="templates:form-control"/>
+                        <p class="form-group searchbox">
+                            <input type="search" name="q" class="form-control" id="q" data-template="templates:form-control"/>
+                            <button type="submit" class="hsg-link-button search-button btn">
+                                <i class="hsg-search-button-icon"></i>
+                            </button>
                         </p>
                         <div data-template="search:load-sections">
                             <p>To limit your results to certain parts of the website, check the