Accessibility improvements

example/source/index.html.md.erb

@@ -19,3 +19,5 @@ If you want slightly more control, you can always use <strong>HTML</strong>.
 For more detail and troubleshooting, take a look at the `README.md` file in the root of this project.
 
 <%= warning_text "Look out! A warning!" %>
+
+<a href="#"><code>code element within a link</code></a>

example/source/nested-page/another-nested-page/index.html.md

@@ -0,0 +1,5 @@
+---
+title: Another nested page
+---
+
+# Another nested page

example/source/nested-page/index.html.md

@@ -0,0 +1,5 @@
+---
+title: Nested page
+---
+
+# Nested page

lib/assets/javascripts/_modules/anchored-headings.js

@@ -11,7 +11,7 @@
       var $this = $(this)
       $this.addClass('anchored-heading')
       $this.prepend(
-        '<a href="#' + $this.attr('id') + '" class="anchored-heading__icon" aria-hidden="true"></a>'
+        '<a href="#' + $this.attr('id') + '" class="anchored-heading__icon" aria-hidden="true" tabindex="-1"></a>'
       )
     }
   }

lib/assets/javascripts/_modules/collapsible-navigation.js

@@ -22,7 +22,7 @@
         var $topLevelItem = $($topLevelItems[i])
         var $heading = $topLevelItem.find('> a')
         var $listing = $topLevelItem.find('> ul')
-        var id = 'toc-' + $heading.text().toLowerCase().replace(' ', '-')
+        var id = 'toc-' + $heading.text().toLowerCase().replace(/\s+/g, '-')
         // Only add collapsible functionality if there are children.
         if ($listing.length === 0) {
           continue

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

@@ -1,13 +1,10 @@
 .technical-documentation {
-  @include govuk-font($size: 19);
+  @include govuk-font($size: 19, $line-height: 1.4);
   // Required for IE11 to render <main> correctly
   display: block;
   margin: govuk-spacing(3);
-  font-size: 19px;
   max-width: 40em;
 
-  line-height: 1.4;
-
   color:  $govuk-text-colour;
 
   @include govuk-media-query(tablet) {
@@ -135,10 +132,12 @@
 
     font-family: monaco, Consolas, "Lucida Console", monospace;
     font-size: 15px;
+    font-size: 0.9375rem;
     color: $code-0E;
 
     @include govuk-media-query(tablet) {
       font-size: 16px;
+      font-size: 1rem;
     }
 
     // Handle long strings (URLs, long variable names, etc) by allowing them
@@ -163,6 +162,16 @@
     }
   }
 
+  // Ensure that if a code element is wrapped with a link that it renders correctly.
+  a code {
+    color: inherit;
+  }
+
+  a:focus code {
+    background: inherit;
+    color: inherit;
+  }
+
   .table-container {
     display: block;
     max-width: 100%;

lib/govuk_tech_docs/table_of_contents/helpers.rb

@@ -63,7 +63,7 @@ def render_page_tree(resources, current_page, config, current_page_html)
             end
 
           if resource.children.any? && resource.url != home_url
-            output += %{<ul><li><a href="#{resource.url}">#{resource.data.title}</a>\n}
+            output += %{<ul><li><a href="#{resource.url}"><span>#{resource.data.title}</span></a>\n}
             output += render_page_tree(resource.children, current_page, config, current_page_html)
             output += '</li></ul>'
           else

lib/source/layouts/core.erb

@@ -62,13 +62,15 @@
             <%= partial "layouts/page_review" %>
           </main>
 
-          <% if config[:tech_docs][:show_contribution_banner] %>
-            <ul class="contribution-banner">
-              <li><%= link_to "View source", source_urls.view_source_url %></li>
-              <li><%= link_to "Report problem", source_urls.report_issue_url %></li>
-              <li><%= link_to "GitHub Repo", source_urls.repo_url %></li>
-            </ul>
-          <% end %>
+          <aside>
+            <% if config[:tech_docs][:show_contribution_banner] %>
+              <ul class="contribution-banner">
+                <li><%= link_to "View source", source_urls.view_source_url %></li>
+                <li><%= link_to "Report problem", source_urls.report_issue_url %></li>
+                <li><%= link_to "GitHub Repo", source_urls.repo_url %></li>
+              </ul>
+            <% end %>
+          </aside>
 
           <%= partial "layouts/footer" %>
         </div>

spec/table_of_contents/helpers_spec.rb

@@ -148,7 +148,7 @@ def add_children(children)
       }
 
       expected_multi_page_table_of_contents = %{
-<ul><li><a href="/index.html">Index</a>
+<ul><li><a href="/index.html"><span>Index</span></a>
 <ul>
   <li>
     <a href="/a.html#heading-one"><span>Heading one</span></a>
@@ -197,7 +197,7 @@ def add_children(children)
       }
 
       expected_multi_page_table_of_contents = %{
-<ul><li><a href="/prefix/index.html">Index</a>
+<ul><li><a href="/prefix/index.html"><span>Index</span></a>
 <ul>
   <li>
     <a href="/prefix/a.html#heading-one"><span>Heading one</span></a>