From bdf4d3401ecab7420be3a08a6f3c93a2d1e469f3 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 11:28:55 +0100 Subject: [PATCH 1/7] Cleanup font mixin usage You can specify the line height within the mixin --- lib/assets/stylesheets/modules/_technical-documentation.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss index 6530fce7..789ef787 100644 --- a/lib/assets/stylesheets/modules/_technical-documentation.scss +++ b/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
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) { From 2fea56322efb096321175faa9d5773a36bc34d49 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 11:29:28 +0100 Subject: [PATCH 2/7] Add relative font-sizes for code elements This means when users change their font size that these elements will scale alongside the rest of the text. We leave the pixel font sizes as fallbacks for older browsers. Fixes https://github.com/alphagov/tech-docs-gem/issues/127 --- lib/assets/stylesheets/modules/_technical-documentation.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss index 789ef787..d40bad10 100644 --- a/lib/assets/stylesheets/modules/_technical-documentation.scss +++ b/lib/assets/stylesheets/modules/_technical-documentation.scss @@ -132,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 From 2c4ff7e7659c9e0e916c7486cde513bb54c8188f Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 11:34:19 +0100 Subject: [PATCH 3/7] Stop hidden anchors from being keyboard accessible As these have been given 'aria-hidden' to hide them from screen readers we should also ensure that they cannot be tabbed to. By adding 'tabindex=-1' we ensure that a screen reader user does not tab to these and get no response. Fixes https://github.com/alphagov/tech-docs-gem/issues/126 --- lib/assets/javascripts/_modules/anchored-headings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/assets/javascripts/_modules/anchored-headings.js b/lib/assets/javascripts/_modules/anchored-headings.js index 1dad5a87..a1e8c118 100644 --- a/lib/assets/javascripts/_modules/anchored-headings.js +++ b/lib/assets/javascripts/_modules/anchored-headings.js @@ -11,7 +11,7 @@ var $this = $(this) $this.addClass('anchored-heading') $this.prepend( - '' + '' ) } } From f90a6edd6f2899ac12a7e36ef6321a74bc7ea168 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 11:47:09 +0100 Subject: [PATCH 4/7] Ensure collapsible navigation IDs are unique Previously the replace method only replaced the first white space with a hyphen. By using regex and looking for whitespace we will capture all spaces between text and create correct IDs that are unique Fixes https://github.com/alphagov/tech-docs-gem/issues/112 --- lib/assets/javascripts/_modules/collapsible-navigation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/assets/javascripts/_modules/collapsible-navigation.js b/lib/assets/javascripts/_modules/collapsible-navigation.js index 1d5c2e62..56cf5309 100644 --- a/lib/assets/javascripts/_modules/collapsible-navigation.js +++ b/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 From 21f173466b0e4fe01474978f4fce3f8cefd92c1b Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 11:50:54 +0100 Subject: [PATCH 5/7] Move contribution banner into an aside landmark Since this content is not main content but related to it, we can use the 'aside' element to indicate this is complementary content to the main content. Fixes https://github.com/alphagov/tech-docs-gem/issues/111 --- lib/source/layouts/core.erb | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/lib/source/layouts/core.erb b/lib/source/layouts/core.erb index 79b62e88..5be3b927 100644 --- a/lib/source/layouts/core.erb +++ b/lib/source/layouts/core.erb @@ -62,13 +62,15 @@ <%= partial "layouts/page_review" %>
- <% if config[:tech_docs][:show_contribution_banner] %> - - <% end %> + <%= partial "layouts/footer" %> From 1809913255ce3ba560dfb448417c03b6504443cb Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 11:57:56 +0100 Subject: [PATCH 6/7] Ensure code elements within links render correctly Fixes https://github.com/alphagov/tech-docs-gem/issues/99 --- example/source/index.html.md.erb | 2 ++ .../stylesheets/modules/_technical-documentation.scss | 10 ++++++++++ 2 files changed, 12 insertions(+) diff --git a/example/source/index.html.md.erb b/example/source/index.html.md.erb index 528d67e9..6616d428 100644 --- a/example/source/index.html.md.erb +++ b/example/source/index.html.md.erb @@ -19,3 +19,5 @@ If you want slightly more control, you can always use HTML. 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!" %> + +code element within a link diff --git a/lib/assets/stylesheets/modules/_technical-documentation.scss b/lib/assets/stylesheets/modules/_technical-documentation.scss index d40bad10..b701dd89 100644 --- a/lib/assets/stylesheets/modules/_technical-documentation.scss +++ b/lib/assets/stylesheets/modules/_technical-documentation.scss @@ -162,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%; From 4a618ee01f3b96b961296fd3378cf17f07604011 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 18 Oct 2019 12:42:40 +0100 Subject: [PATCH 7/7] Ensure nested pages have visible focus states Nested pages render links within the sidebar differently. Spans are required to show a focus state, so by adding this it makes these nested links consistent with the rest of the navigation. Fixes https://github.com/alphagov/tech-docs-gem/issues/114 --- example/source/nested-page/another-nested-page/index.html.md | 5 +++++ example/source/nested-page/index.html.md | 5 +++++ lib/govuk_tech_docs/table_of_contents/helpers.rb | 2 +- spec/table_of_contents/helpers_spec.rb | 4 ++-- 4 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 example/source/nested-page/another-nested-page/index.html.md create mode 100644 example/source/nested-page/index.html.md diff --git a/example/source/nested-page/another-nested-page/index.html.md b/example/source/nested-page/another-nested-page/index.html.md new file mode 100644 index 00000000..71df944f --- /dev/null +++ b/example/source/nested-page/another-nested-page/index.html.md @@ -0,0 +1,5 @@ +--- +title: Another nested page +--- + +# Another nested page diff --git a/example/source/nested-page/index.html.md b/example/source/nested-page/index.html.md new file mode 100644 index 00000000..ced4df9e --- /dev/null +++ b/example/source/nested-page/index.html.md @@ -0,0 +1,5 @@ +--- +title: Nested page +--- + +# Nested page diff --git a/lib/govuk_tech_docs/table_of_contents/helpers.rb b/lib/govuk_tech_docs/table_of_contents/helpers.rb index 8da8d626..681c9d1b 100644 --- a/lib/govuk_tech_docs/table_of_contents/helpers.rb +++ b/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 += %{
  • #{resource.data.title}\n} + output += %{
    • #{resource.data.title}\n} output += render_page_tree(resource.children, current_page, config, current_page_html) output += '
    ' else diff --git a/spec/table_of_contents/helpers_spec.rb b/spec/table_of_contents/helpers_spec.rb index ee53c69b..7ef8063b 100644 --- a/spec/table_of_contents/helpers_spec.rb +++ b/spec/table_of_contents/helpers_spec.rb @@ -148,7 +148,7 @@ def add_children(children) } expected_multi_page_table_of_contents = %{ -