govuk_tech_docs 2.4.3 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b50020d6e21e26732892222d026dccc5f6c8b1369c240ce9c7433c3c1aebc30
-  data.tar.gz: 68d3750473f5cabebd603cadecdff678c345a4b9b16b64a5763919fea46127bd
+  metadata.gz: dbe80b6133cdaf41e2ab339250489d0a8c72f86cc88dc89f7e51c2340306a4c9
+  data.tar.gz: f79167cb25923c99056e776a289dfa7124643c251b19633e2f01b7995d04df2a
 SHA512:
-  metadata.gz: d2ab8b37939e4f4092b46c71bdb3361642a7d878ccb041472bae3d672e086a9936aea4127dfd825b00552e31d44076a0abca3f30b6f5a078d9c5a53b88962977
-  data.tar.gz: 4cdf9cc3cfc46f499dffde8c8b593a0faa151dea653225f289702740ad1a979fb46d5ac8a1028c18eac7ea274d2cda45a6942b89984aa9a95c6640dd7dc1f2a4
+  metadata.gz: a32ec9f65bf6a326b7300575fd101a36663a982160b81462b0b57854ecd13b8a3fa9116cc93a4702f4bd0fcfb04480a1d787f61522b23a974cd7878250a86086
+  data.tar.gz: a978877e74111d7055b07682d32dc8e09c5e5aa972e6e143c144a3261a734b57b8257273e7afd3f850d657fd87d9b35744bfa87283a88450c3ca2eb7b1b0c33a

data/.travis.yml

@@ -13,7 +13,7 @@ deploy:
   provider: rubygems
   gem: govuk_tech_docs
   api_key:
-    secure: CY9C+IUqUeYWqXSyQgfF5swdYw1rRtYi0ai1xasD3R5rwARF6Qr8CnmdSBjfT2S84fXQiMza45Jto4w1jiy3o4wpxuKN68xEB7J4W/YEpFcZectzsmXwcMJH+DXh720KFIX2xiHaG5N0nWzAoV+6zgw6Vq24IXYE33wO6BgCmTe3vtO+Apg0+wDRAOuJ4T5XfSyWUvG8JqLRb81t+WbrsOLcUgZn24DHvs+lrjXTDDTzrgwTuKeaKd+h+mfxlHZD+Xxbcy624qop5ICwOOP0koRXCdVmTOSZ4mNI10+loCyA1B5Tryj/2wweyc8CanqRMniF8p/BxLV1sAwihpCmCpuWUyxq2pTPSgjF1A1f5hXwkAT/HiaXLzXKyO1REnbtLHYvre10EIYIII4nDAtCZP0YLYvPoKQUrAydeWiQ4jL+cyEeN/8Dznx2OPrhcwxazsElMm0yOZDNXERNIf3IVnQshxMFxQfGW3NTG8XR4l5PHAI2XqKy/O/VGbiRcNV3EYVG5w/KumB698BGDGV2QPOlh3JOEkebXTGDsMJj/gzZik2BtvAqYatwgx7oiYzvhEPz0m9o/DTS7Gf/5Hkj3iV2mpcNtRMc0HKmS7bwkv8Cl6dWECt7PWQ8Kz5ttrCKRmTCJDgra2xLFuV8kbBISPkKKv87KCXzxthM8ps94WE=
+    secure: "pFaDlf2VfJAv/EwTFQTdHQFlFRLxtNnipcJyFG0Dvn7itvETKzs5+91gnXQAJuUzGBgXSidHgMkmPTsmWM4k2wbOcHopir9ThSKf0OUtI6o/5GqCU92BpLNJ/Ykhf+wyz9ai6HWX+HN5KRDqpeiuwhraiQjy/tg6lwsauBU8sB80wvUgYYM6oXijHfVwPUkXdhqYTIj20S0M868yYGtf4IInHds8M85TSNor79TFvRd0SFLO7cS+bftqxnNo1mYuBzVXls3POjq59WX+yG8+vS9Sr/tHHuKxw1nho95Fnjf8RYzdxD45osCrXAu3JIbWyJjF6AmQd87zILhdl8n0KNf4tbpFVM+SXVUjMZ2ERvcS1v+nBybVzU3uPwskGZNfWMtCOS401yRF3A21xzNoS916gZrTUSvHjsMcNhzJAZCsEx6MGFVTMzfe5slfWQCPk8k9wBHjyUyC7dl0h5g9qo3jTDnafcpQdnWGOSGgwCxgTaYT1NFfV3M5YpdGevorkOnE6EmWtU67mdtjzRyVvMWc8obqBWdyYnxqrBYKnHDeu/LhtJq3Gvqt/IExwAI8Q1Q7j296hzfmYMcgnETctLNZWoIa4sESDDVMlspcZKqCsrxytDeBFm/yMqVp12S7cjoQbt+fItTl3Bh3BP56j+3fqJlFvTPX4FIKUaaRLy0="
   on:
     repo: alphagov/tech-docs-gem
     branch: master

data/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+## 3.0.0
+
+### Breaking changes
+
+The search user experience is now more accessible for screenreader users. Search results are now on a separate page instead of a modal window.
+
+Users can no longer see search results as they type. They must press the Return key or select the search button to see the search results page.
+
+This was added in [pull request #263: Change search to only show results after submit](https://github.com/alphagov/tech-docs-gem/pull/263).
+
+### Fixes
+
+- [#265: Fix mark styles in Windows High Contrast Mode](https://github.com/alphagov/tech-docs-gem/pull/265)
+
 ## 2.4.3
 
 - [#236: Fix search 'autocomplete' behaviour](https://github.com/alphagov/tech-docs-gem/pull/236)

data/lib/assets/javascripts/_modules/search.js

@@ -6,35 +6,48 @@
   Modules.Search = function Search () {
     var s = this
     var $html = $('html')
-    var $tocNav
     var $searchForm
     var $searchLabel
     var $searchInput
     var $searchResults
     var $searchResultsTitle
     var $searchResultsWrapper
-    var $searchResultsClose
+    var $searchHelp
     var results
     var query
-    var queryTimer
     var maxSearchEntries = 20
 
     this.start = function start ($element) {
       $searchForm = $element.find('form')
       $searchInput = $element.find('#search')
       $searchLabel = $element.find('.search__label')
-      $searchResultsWrapper = $element.find('.search-results')
+      $searchResultsWrapper = $('#search-results')
       $searchResults = $searchResultsWrapper.find('.search-results__content')
       $searchResultsTitle = $searchResultsWrapper.find('.search-results__title')
-      $searchResultsClose = $searchResultsWrapper.find('.search-results__close')
-      $tocNav = $('#toc')
-      s.downloadSearchIndex()
-      attach()
+      $searchHelp = $('#search-help')
+
+      changeSearchAction()
       changeSearchLabel()
+
+      // Only do searches on the search page
+      if (s.isOnSearchPage()) {
+        s.downloadSearchIndex()
+        $html.addClass('has-search-results-open')
+
+        if (window.location.search) {
+          query = s.getQuery()
+          if (query) {
+            $searchInput.val(query)
+            doSearch(query)
+            doAnalytics()
+            document.title = query + ' - ' + document.title
+          }
+        }
+      }
     }
 
     this.downloadSearchIndex = function downloadSearchIndex () {
-      updateTitle('Loading search index')
+      updateTitle('Loading search results')
       $.ajax({
         url: '/search.json',
         cache: true,
@@ -48,46 +61,45 @@
       })
     }
 
-    function attach () {
-      // Search functionality on search text input
-      $searchInput.on('input', function (e) {
-        e.preventDefault()
-        query = $(this).val()
-        s.search(query, function (r) {
-          results = r
-          renderResults(query)
-          updateTitle()
-        })
-        if (window.ga) {
-          window.clearTimeout(queryTimer)
-          queryTimer = window.setTimeout(sendQueryToAnalytics, 1000)
-        }
-      })
+    function changeSearchAction () {
+      // We need JavaScript to do search, so if JS is not available the search
+      // input sends the query string to Google. This JS function changes the
+      // input to instead send it to the search page.
+      $searchForm.prop('action', '/search')
+      $searchForm.find('input[name="as_sitesearch"]').remove()
+    }
 
-      // Set focus on the first search result instead of submiting the search
-      // form to Google
-      $searchForm.on('submit', function (e) {
-        e.preventDefault()
-        showResults()
-        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()
-        }
-      })
+    function changeSearchLabel () {
+      $searchLabel.text('Search this documentation')
+    }
 
-      // Closing the search results, move focus back to the search input
-      $searchResultsClose.on('click', function (e) {
-        e.preventDefault()
-        $searchInput.focus()
-        hideResults()
+    this.isOnSearchPage = function isOnSearchPage () {
+      return Boolean(window.location.pathname.match(/\/search(\/|\/index.html)?$/))
+    }
+
+    this.getQuery = function getQuery () {
+      var query = decodeURIComponent(
+        window.location.search
+          .match(/q=([^&]*)/)[1]
+          .replace(/\+/g, ' ')
+      )
+      return query
+    }
+
+    function doSearch (query) {
+      s.search(query, function (r) {
+        results = r
+        renderResults(query)
+        updateTitle()
       })
+    }
 
-      // Attach analytics events to search result clicks
+    // TODO: remove this and sendQueryToAnalytics in a future breaking release
+    function doAnalytics () {
       if (window.ga) {
+        sendQueryToAnalytics()
+
+        // Attach analytics events to search result clicks
         $searchResults.on('click', '.search-result__title a', function () {
           var href = $(this).attr('href')
           ga('send', {
@@ -99,15 +111,6 @@
           })
         })
       }
-
-      // When selecting navigation link, close the search results.
-      $('#toc').on('click', 'a', function (e) {
-        hideResults()
-      })
-    }
-
-    function changeSearchLabel () {
-      $searchLabel.text('Search this documentation')
     }
 
     function getResults (query) {
@@ -122,7 +125,6 @@
 
     this.search = function search (query, callback) {
       if (query === '') {
-        hideResults()
         return
       }
       showResults()
@@ -192,23 +194,14 @@
     function updateTitle (text) {
       if (typeof text === 'undefined') {
         var count = results.length
-        var resultsText = count + ' results'
+        var resultsText = 'Search - ' + query + ' - ' + count + ' results'
       }
       $searchResultsTitle.text(text || resultsText)
     }
 
     function showResults () {
-      $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')
+      $searchResultsWrapper.removeAttr('hidden')
+      $searchHelp.attr('hidden', 'true')
     }
 
     function sendQueryToAnalytics () {

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

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

data/lib/assets/stylesheets/modules/_search.scss

@@ -52,48 +52,44 @@ $input-size: 40px;
   }
 }
 
-html.has-search-results-open {
-  overflow: hidden;
-  .app-pane__content {
-    overflow: hidden;
-  }
-  
-  .toc__close{
-    display: none;
+@include govuk-media-query($until: tablet) {
+  html.js.has-search-results-open:not(.toc-open) {
+    .toc {
+      display: block;
+      padding-bottom: 0;
+    }
+
+    .toc__close {
+      display: none;
+    }
+
+    .toc__list {
+      display: none;
+    }
   }
 }
+
 .search-results {
-  display: none;
-  &.is-open {
-    display: block;
+  @include govuk-media-query(tablet) {
+    // Create basis for the search results caret (below)
+    position: relative;
+
+    @include govuk-font($size: 16);
+    padding-top: govuk-spacing(6);
   }
-}
 
-.search-results {
-    position: absolute;
-    top: 60px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 600;
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    @include govuk-media-query(tablet) {
-      padding: govuk-spacing(6);
-      top: 0;
-      // The width of the sidebar
-      left: 330px;
-      min-height: auto;
-    }
+  a {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
 
-    a {
-      @include govuk-link-common;
-      @include govuk-link-style-no-visited-state;
-    }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
   }
+}
 .search-results__inner {
-  position: relative;
   background: govuk-colour("white");
   border-top: 1px solid govuk-colour("mid-grey");
   max-width: 40rem;
@@ -104,7 +100,7 @@ html.has-search-results-open {
     &::after {
       content: '';
       position: absolute;
-      top: 10px;
+      top: 35px;
       left: -9px;
       width: 10px;
       height: 20px;
@@ -117,44 +113,6 @@ html.has-search-results-open {
   @include govuk-font($size: 27, $weight: bold);
   margin-bottom: govuk-spacing(6);
 }
-.search-results__close {
-  @include govuk-font($size: 16);
-  position: absolute;
-  top: 18px;
-  right: 20px;
-  appearance: none;
-  -webkit-appearance: none;
-  background: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-
-  &:focus {
-    @include govuk-focused-text;
-  }
-
-  &::after {
-    content: '';
-    display: inline-block;
-    vertical-align: middle;
-    padding-left: 8px;
-    height: 18px;
-    width: 18px;
-    background: no-repeat url('/images/govuk-icn-close.png') center right;
-    @include govuk-device-pixel-ratio {
-      background-image: url('/images/govuk-icn-close@2x.png');
-    }
-    background-size: contain;
-  }
-}
-.search-results__close-label {
-  position: absolute;
-  left: -9999em;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
 .search-result {
   margin-bottom: govuk-spacing(6);
 }
@@ -162,4 +120,24 @@ html.has-search-results-open {
   background-color: transparent;
   color: inherit;
   font-weight: bold;
+
+  // In forced color mode some browsers will keep the background transparent
+  // but set the text colour black, making the highlighted text unreadable.
+  // The following blocks fix this by setting the text colour to be the same as
+  // other text in a way that forced color mode will respect.
+
+  @media screen and (-ms-high-contrast: active) {
+    // IE does not support `CanvasText`,
+    // and `currentColor` does not work with Blink
+    color: currentColor;
+  }
+
+  @media screen and (forced-colors: active) {
+    background-color: Canvas;  // needed for Firefox
+    color: CanvasText;
+  }
+}
+
+.js .search-help__no-js {
+  display: none;
 }

data/lib/assets/stylesheets/modules/_technical-documentation.scss

@@ -11,10 +11,6 @@
     margin: 0 govuk-spacing(6) govuk-spacing(6);
   }
 
-  .has-search-results-open & {
-    visibility: hidden;
-  }
-
   > h1 {
     @extend %govuk-heading-xl;
 

data/lib/assets/stylesheets/modules/_toc.scss

@@ -165,9 +165,6 @@
 
       .toc__list {
         margin-right: govuk-spacing(7);
-        &.search-results-open {
-          display: none;
-        }
       }
 
       .toc__close {

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "2.4.3".freeze
+  VERSION = "3.0.0".freeze
 end

data/lib/govuk_tech_docs.rb

@@ -117,6 +117,8 @@ module GovukTechDocs
 
         search.tokenizer_separator = '/[\s\-/]+/'
       end
+    else
+      context.ignore "search/*"
     end
   end
 end

data/lib/source/layouts/_search.erb

@@ -13,12 +13,5 @@
       placeholder="Search">
     <button type="submit" class="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="assertive" role="alert">Results</h2>
-      <div class="search-results__content"></div>
-    </div>
-  </div>
 </div>
 <% end %>

data/lib/source/search/index.html.erb

@@ -0,0 +1,31 @@
+---
+title: Search
+index: false
+prevent_indexing: true
+hide_in_navigation: true
+---
+
+<div id="search-help" class="search-help">
+  <%# strange id is to avoid clash with search input id #%>
+  <h1 id="how-to-search">Search</h1>
+
+  <p class="govuk-body search-help__no-js">
+    You need to turn on JavaScript in your browser to search this site. You can either:
+
+    <ul>
+      <li>turn on JavaScript in your browser</li>
+      <li>search this site using Google</li>
+    </ul>
+  </p>
+
+  <p class="govuk-body">
+    Enter a search term in the search box, then select the search button.
+  </p>
+</div>
+
+<div id="search-results" class="search-results" hidden aria-labelledby="search-results-title">
+  <div class="search-results__inner">
+    <h1 id="search-results-title" class="search-results__title" aria-live="assertive">Results</h1>
+    <div class="search-results__content"></div>
+  </div>
+</div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_tech_docs
 version: !ruby/object:Gem::Version
-  version: 2.4.3
+  version: 3.0.0
 platform: ruby
 authors:
 - Government Digital Service
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-09-14 00:00:00.000000000 Z
+date: 2021-10-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -387,6 +387,7 @@ files:
 - lib/source/layouts/_search.erb
 - lib/source/layouts/core.erb
 - lib/source/layouts/layout.erb
+- lib/source/search/index.html.erb
 - lib/source/stylesheets/manifest.css
 - node_modules/govuk-frontend/govuk/_base.scss
 - node_modules/govuk-frontend/govuk/all-ie8.scss