govuk_tech_docs 4.1.1 → 4.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3e848b2f3145907e130147476ebd629df69ac468e69348e9de3c1362c0263b6
-  data.tar.gz: 5afa9c3b6a40237ad08c18c255d4fb381baff1911b981ae7136e23f94e2a52a3
+  metadata.gz: 8841e718fe072372cd281eafe72f331dee10d7c5beb8f02afaba8c8472adccb7
+  data.tar.gz: 11dab6217737ba9fa9d1c1057a620e12bd810d6c133b64e8f2d6eee40e698b8c
 SHA512:
-  metadata.gz: e748131fd5124335034686063131b98309bb83c7e709b633a6e21fee145db1f44f173ed0b7f063036993f580192b0ad532fca19dba245d9f31579b9fa469a2f2
-  data.tar.gz: b182f9398a855d96927c3a0c103e353c271a348d3d5eb8f35a0329d541b23b8b1b655b44aff6648987939dc2b0707012be443a30396c78ca576024ae1c2ce677
+  metadata.gz: 82d6f742cfbe4619a9ffc77c3c19d011d0292ce514be213a70c5aab407132d98b0515a89b94de53367c46fa22b3c11237a631bd3b39198945ffd655efd09ad6f
+  data.tar.gz: 14c8bb34c9b140edfb7d114887119306fe70c140a6ad343946e5ba152767ad99a417946874795c6778387a8d35da0d20b60e486eb4b4942420ad99a40d318a79

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.1.2
+
+## Fixes
+
+- [Fix focus issues with table of contents and main content pane](https://github.com/alphagov/tech-docs-gem/pull/381)
+
 ## 4.1.1
 
 ## Fixes

data/Rakefile

@@ -1,10 +1,18 @@
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
-require "jasmine"
 
 RSpec::Core::RakeTask.new(:spec)
 
-load "jasmine/tasks/jasmine.rake"
+namespace :jasmine do
+  desc "Test JavaScript with headless browser"
+  task :ci do
+    sh "npm test"
+  end
+  desc "Test JavaScript in browser"
+  task :server do
+    sh "npm run test-server"
+  end
+end
 
 desc "Lint Ruby and JavaScript"
 task :lint do

data/govuk_tech_docs.gemspec

@@ -39,6 +39,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "base64" # TODO: remove once middleman-sprockets declares this itself.
   spec.add_dependency "bigdecimal" # TODO: remove once activesupport declares this itself.
   spec.add_dependency "chronic", "~> 0.10.2"
+  spec.add_dependency "concurrent-ruby", "1.3.4" # 1.3.5 introduced a change that breaks activesupport, and so middleman
   spec.add_dependency "csv" # TODO: remove once tilt declares this itself.
   spec.add_dependency "haml", "~> 6.0"
   spec.add_dependency "middleman", "~> 4.0"
@@ -57,7 +58,6 @@ Gem::Specification.new do |spec|
 
   spec.add_development_dependency "byebug"
   spec.add_development_dependency "capybara", "~> 3.32"
-  spec.add_development_dependency "jasmine", "~> 3.5"
   spec.add_development_dependency "rake", "~> 13.0"
   spec.add_development_dependency "rspec", "~> 3.9"
   spec.add_development_dependency "rubocop-govuk", "~> 4.10"

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

@@ -104,7 +104,6 @@
     function openNavigation () {
       $html.addClass('toc-open')
 
-      toggleBackgroundVisiblity(false)
       updateAriaAttributes()
       $toc.focus()
     }
@@ -112,25 +111,30 @@
     function closeNavigation () {
       $html.removeClass('toc-open')
 
-      toggleBackgroundVisiblity(true)
       updateAriaAttributes()
-    }
-
-    function toggleBackgroundVisiblity (visibility) {
-      $('.toc-open-disabled').attr('aria-hidden', visibility ? '' : 'true')
+      $openButton.focus()
     }
 
     function updateAriaAttributes () {
       var tocIsVisible = $toc.is(':visible')
-      var openButtonIsVisible = $openButton.is(':visible')
+      var tocIsDialog = $openButton.is(':visible')
 
       $($openButton).add($closeButton)
         .attr('aria-expanded', tocIsVisible ? 'true' : 'false')
 
       $toc.attr({
         'aria-hidden': tocIsVisible ? 'false' : 'true',
-        role: openButtonIsVisible ? 'dialog' : null
+        role: tocIsDialog ? 'dialog' : null
       })
+
+      $('.app-pane__content').attr('aria-hidden', (tocIsDialog && tocIsVisible) ? 'true' : 'false')
+
+      // only make main content pane focusable if it scrolls independently of the toc
+      if (!tocIsDialog) {
+        $('.app-pane__content').attr('tabindex', '0')
+      } else {
+        $('.app-pane__content').removeAttr('tabindex')
+      }
     }
 
     function preventingScrolling (callback) {

data/lib/assets/stylesheets/modules/_app-pane.scss

@@ -61,3 +61,10 @@
   }
 }
 
+.app-pane__content:focus-visible,
+.app-pane__content:has(main:focus-visible) {
+  outline: $govuk-focus-width solid transparent;
+  box-shadow:
+    0 0 0 4px $govuk-focus-colour,
+    0 0 0 8px $govuk-focus-text-colour;
+}

data/lib/govuk_tech_docs/version.rb

@@ -1,3 +1,3 @@
 module GovukTechDocs
-  VERSION = "4.1.1".freeze
+  VERSION = "4.1.2".freeze
 end

data/lib/source/layouts/core.erb

@@ -58,7 +58,7 @@
           </div>
         <% end %>
 
-        <div class="app-pane__content toc-open-disabled" aria-label="Content" tabindex="0">
+        <div class="app-pane__content toc-open-disabled" aria-label="Content">
           <main id="content" class="technical-documentation" data-module="anchored-headings">
             <%= yield %>
             <%= partial "layouts/page_review" %>