Some search and keyboard navigation updates

Add a button to the search form as suggested in the DAC Acessibility audit. Make input label more descriptive to help screen reader users determine the purpose of the form. Prevent tabbing beyond the TOC modal and/or search results when they are open. Screen reader users should also not be able to access page content that is not visible on the screen.
alphagov · Feb 25, 2021 · ae6fb0d · ae6fb0d
1 parent 2ebf6af
commit ae6fb0d
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 15 deletions.
diff --git a/lib/assets/javascripts/_modules/search.js b/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()
@@ -98,7 +100,7 @@
     }
 
     function changeSearchLabel () {
-      $searchLabel.text('Search')
+      $searchLabel.text('Search this documentation')
     }
 
     function getResults (query) {
@@ -192,12 +194,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 () {

diff --git a/lib/assets/javascripts/_modules/table-of-contents.js b/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()

diff --git a/lib/assets/stylesheets/modules/_search.scss b/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,48 @@
   }
 }
 
+.js .search__label {
+  @extend .govuk-visually-hidden;
+}
+
+.search__form {
+  position: relative;
+  width: 100%;
+}
+
+.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;
+  border-radius: 0;
+  padding: 0;
+  width: $input-size;
+  height: $input-size;
+  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 {
@@ -39,6 +74,7 @@ html.has-search-results-open {
     right: 0;
     bottom: 0;
     z-index: 600;
+    min-height: 100vh;
     overflow-x: scroll;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
@@ -47,6 +83,7 @@ html.has-search-results-open {
       top: 0;
       // The width of the sidebar
       left: 330px;
+      min-height: auto;
     }
 
     a:link, a:visited {
@@ -68,6 +105,7 @@ html.has-search-results-open {
   }
 .search-results__inner {
   position: relative;
+  height: 100%;
   background: govuk-colour("white");
   border-top: 1px solid govuk-colour("mid-grey");
   max-width: 40rem;

diff --git a/lib/assets/stylesheets/modules/_toc.scss b/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;

diff --git a/lib/source/images/search-button.png b/lib/source/images/search-button.png
diff --git a/lib/source/layouts/_search.erb b/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>

diff --git a/lib/source/layouts/core.erb b/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] %>>