Merge pull request #36 from ConvivioTeam/general-accessibility-fixes

General accessibility fixes
alphagov · Jul 31, 2018 · 7b5fdc9 · 7b5fdc9
2 parents 51ae107 + c1c3257
commit 7b5fdc9
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 28 deletions.
diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js
@@ -31,15 +31,17 @@
         var $topLevelItem = $($topLevelItems[i]);
         var $heading = $topLevelItem.find('> a');
         var $listing = $topLevelItem.find('> ul');
+        var id = 'toc-' + $heading.text().toLowerCase().replace(' ', '-')
         // Only add collapsible functionality if there are children.
         if ($listing.length == 0) {
           continue;
         }
         $topLevelItem.addClass('collapsible');
         $listing.addClass('collapsible__body')
+        .attr('id', id)
         .attr('aria-expanded', 'false');
         $heading.addClass('collapsible__heading')
-        .after('<button class="collapsible__toggle"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
+        .after('<button class="collapsible__toggle" aria-controls="' + id +'"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
         $topLevelItem.on('click', '.collapsible__toggle', function(e) {
           e.preventDefault();
           var $parent = $(this).parent();
@@ -51,11 +53,11 @@
     function toggleHeading($topLevelItem) {
       var isOpen = $topLevelItem.hasClass('is-open');
       var $heading = $topLevelItem.find('> a');
-      var $body = $topLevelItem.find('collapsible__body');
+      var $body = $topLevelItem.find('.collapsible__body');
       var $toggleLabel = $topLevelItem.find('.collapsible__toggle-label');
 
       $topLevelItem.toggleClass('is-open', !isOpen);
-      $body.attr('aria-expanded', isOpen ? 'true' : 'false');
+      $body.attr('aria-expanded', isOpen ? 'false' : 'true');
       $toggleLabel.text(isOpen ? 'Expand ' + $heading.text() : 'Collapse ' + $heading.text());
     }
 

diff --git a/lib/assets/stylesheets/modules/_collapsible.scss b/lib/assets/stylesheets/modules/_collapsible.scss
@@ -11,6 +11,10 @@
     display: block
   }
 }
+.collapsible__heading,
+.toc__list > ul > li > a:link.collapsible__heading {
+  margin-right: 30px;
+}
 .collapsible__toggle {
   position: absolute;
   top: 0;
@@ -34,12 +38,15 @@
   &::after {
     content: '';
     display: block;
-    background: no-repeat file-url('arrow-down.svg') center center;
-    background-size: 18px auto;
-    width: 20px;
-    height: 40px;
+    border: 2px solid $black;
+    border-width: 2px 2px 0 0;
+    transform: rotate(135deg);
+    width: 10px;
+    height: 10px;
+    margin-top: 10px;
   }
   .collapsible.is-open &::after {
-    background-image: file-url('arrow-up.svg');
+    transform: rotate(315deg);
+    margin-top: 18px;
   }
 }
diff --git a/lib/assets/stylesheets/modules/_toc.scss b/lib/assets/stylesheets/modules/_toc.scss
@@ -27,7 +27,7 @@
 
       a:link, a:visited {
         display: block;
-        padding: 8px 40px 8px $gutter-half;
+        padding: 8px $gutter 8px $gutter-half;
         margin: 0 $gutter-half * -1;
         border-left: 5px solid transparent;
 

diff --git a/lib/source/images/arrow-down.svg b/lib/source/images/arrow-down.svg
diff --git a/lib/source/images/arrow-up.svg b/lib/source/images/arrow-up.svg
diff --git a/lib/source/layouts/_header.erb b/lib/source/layouts/_header.erb
@@ -8,7 +8,7 @@
       <% end %>
         <% if config[:tech_docs][:show_govuk_logo] %>
           <span class="govuk-logo">
-            <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36">
+            <img class="govuk-logo__printable-crown" src="/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36" alt="">
             GOV.UK
           </span>
         <% end %>