Some search and keyboard navigation updates

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 - [#210: Fix issue with WCAG 2.1 success criterion 1.3.1 (Info and Relationships)](https://github.com/alphagov/tech-docs-gem/pull/210)
+- [#209: Some search and keyboard navigation updates](https://github.com/alphagov/tech-docs-gem/pull/209)
 
 ### Ruby version bump
 

lib/assets/javascripts/_modules/search.js

@@ -6,6 +6,7 @@
   Modules.Search = function Search () {
     var s = this
     var $html = $('html')
+    var $tocNav
     var $searchForm
     var $searchLabel
     var $searchInput
@@ -26,6 +27,7 @@
       $searchResults = $searchResultsWrapper.find('.search-results__content')
       $searchResultsTitle = $searchResultsWrapper.find('.search-results__title')
       $searchResultsClose = $searchResultsWrapper.find('.search-results__close')
+      $tocNav = $('#toc')
       s.downloadSearchIndex()
       attach()
       changeSearchLabel()
@@ -67,7 +69,14 @@
       $searchForm.on('submit', function (e) {
         e.preventDefault()
         showResults()
-        $searchResults.find('.search-result__title a').first().focus()
+        var $firstResult = $searchResults.find('.search-result__title a').first()
+        if ($firstResult.length) {
+          $firstResult.focus()
+        } else {
+          // if there are no results, show the "0 results" state
+          results = []
+          updateTitle()
+        }
       })
 
       // Closing the search results, move focus back to the search input
@@ -98,7 +107,7 @@
     }
 
     function changeSearchLabel () {
-      $searchLabel.text('Search')
+      $searchLabel.text('Search this documentation')
     }
 
     function getResults (query) {
@@ -192,12 +201,14 @@
       $searchResultsWrapper.addClass('is-open')
         .attr('aria-hidden', 'false')
       $html.addClass('has-search-results-open')
+      $tocNav.addClass('search-results-open')
     }
 
     function hideResults () {
       $searchResultsWrapper.removeClass('is-open')
         .attr('aria-hidden', 'true')
       $html.removeClass('has-search-results-open')
+      $tocNav.removeClass('search-results-open')
     }
 
     function sendQueryToAnalytics () {

lib/assets/javascripts/_modules/table-of-contents.js

@@ -69,6 +69,7 @@
 
     function closeNavigation () {
       $html.removeClass('toc-open')
+      $html.removeClass('has-search-results-open')
 
       toggleBackgroundVisiblity(true)
       updateAriaAttributes()

lib/assets/stylesheets/modules/_search.scss

@@ -1,16 +1,9 @@
+$input-size: 40px;
+
 @include govuk-media-query($media-type: screen) {
   .page-title + .search {
     margin-top: govuk-spacing(6);
   }
-
-  .js .search__label {
-    position: absolute;
-    left: -9999em;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-  }
 }
 
 @include govuk-media-query($media-type: print) {
@@ -19,6 +12,46 @@
   }
 }
 
+.js .search__label {
+  @extend .govuk-visually-hidden;
+}
+
+.search__form {
+  position: relative;
+}
+
+.search__input {
+  width: 230px;
+  width: calc(100% - #{$input-size});
+}
+
+.search__button {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border: 0;
+  background-color: govuk-colour('blue');
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  width: $input-size;
+  height: 100%;
+  background-image: url('/images/search-button.png');
+  background-repeat: no-repeat;
+  background-position: 2px 50%;
+  text-indent: -5000px;
+  overflow: hidden;
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black");
+
+    @include govuk-if-ie8 {
+      border-width: $govuk-border-width-form-element * 2;
+    }
+  }
+}
+
 html.has-search-results-open {
   overflow: hidden;
   .app-pane__content {
@@ -47,6 +80,7 @@ html.has-search-results-open {
       top: 0;
       // The width of the sidebar
       left: 330px;
+      min-height: auto;
     }
 
     a:link, a:visited {

lib/assets/stylesheets/modules/_toc.scss

@@ -165,6 +165,9 @@
 
       .toc__list {
         margin-right: govuk-spacing(7);
+        &.search-results-open {
+          display: none;
+        }
       }
 
       .toc__close {
@@ -209,13 +212,18 @@
           height: 100%;
           overflow: hidden;
           pointer-events: none;
+          // set visibility hidden on the body when TOC is open
+          // this is a hack to prevent tabbing to out-of-view elements when the TOC is active
+          // it's preferable to keyboard trapping... probably.
+          visibility: hidden;
         }
 
         .toc-show {
           visibility: hidden;
         }
 
         .toc {
+          visibility: visible;
           display: block;
           pointer-events: auto;
           position: fixed;

lib/source/layouts/_search.erb

@@ -1,16 +1,22 @@
 <% if config[:tech_docs][:enable_search] %>
 <div class="search" data-module="search">
-  <form action="https://www.google.co.uk/search" method="get" role="search">
+  <form action="https://www.google.co.uk/search" method="get" role="search" class="search__form govuk-!-margin-bottom-4">
     <input type="hidden" name="as_sitesearch" value="<%= config[:tech_docs][:host] %>"/>
-    <label class="govuk-label search__label" for="search">
+    <label class="govuk-label search__label" for="search" aria-hidden="true">
       Search (via Google)
     </label>
-    <input class="govuk-input govuk-!-margin-bottom-4" id="search" name="q" type="text" aria-controls="search-results" placeholder="Search">
+    <input
+      type="text"
+      id="search" name="q"
+      class="govuk-input govuk-!-margin-bottom-0 search__input"
+      aria-controls="search-results"
+      placeholder="Search">
+    <button type="submit" class="govuk-button search__button">Search</button>
   </form>
   <div id="search-results" class="search-results" aria-hidden="true" role="dialog" aria-labelledby="search-results-title">
     <div class="search-results__inner">
       <button class="search-results__close">Close<span class="search-results__close-label"> search results</span></button>
-      <h2 id="search-results-title" class="search-results__title" aria-live="polite">Results</h2>
+      <h2 id="search-results-title" class="search-results__title" aria-live="assertive" role="alert">Results</h2>
       <div class="search-results__content"></div>
     </div>
   </div>

lib/source/layouts/core.erb

@@ -43,7 +43,7 @@
       <div class="app-pane__body"<%= " data-module=\"#{yield_content(:toc_module)}\"" if content_for? :toc_module %>>
         <% if content_for? :sidebar %>
           <div class="app-pane__toc">
-            <div class="toc" data-module="table-of-contents" tabindex="-1" aria-label="Table of contents">
+            <div class="toc" data-module="table-of-contents" tabindex="-1" aria-label="Table of contents" role="dialog">
               <%= partial "layouts/search" %>
               <button type="button" class="toc__close js-toc-close" aria-controls="toc" aria-label="Hide table of contents"></button>
               <nav id="toc" class="js-toc-list toc__list" aria-labelledby="toc-heading"<%= " data-module=\"collapsible-navigation\"" if config[:tech_docs][:collapsible_nav] %>>