Enable focus + keyboard scroll on all code blocks

lib/marked-renderer.js

@@ -1,7 +1,17 @@
 const { marked } = require('marked')
 
-/** A custom renderer that avoids wrapping `<img>` tags in `<p>` tags */
+/**
+ * Custom markdown renderer that avoids wrapping `<img>` image
+ * tags (or code with syntax highlighting) in `<p>` paragraphs
+ */
 class DesignSystemRenderer extends marked.Renderer {
+  code (code, language, isEscaped) {
+    return !language
+      ? super.html(code)
+      : super.code(code, language, isEscaped)
+        .replace('<code', '<code tabindex="0"')
+  }
+
   paragraph (text) {
     return text.trim().startsWith('<img')
       ? super.html(`${text}\n`)

src/get-started/updating-your-code/index.md

@@ -61,7 +61,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the skip link by rendering your own,
           which can include custom <code>text</code>
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block skipLink %}
   {{ govukSkipLink({ text: "custom text" }) }}
 {% endblock %}{% endraw %}</code></pre>
@@ -83,7 +83,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the header component by rendering your own,
           which can include custom <code>classes</code>
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block header %}
     {{ govukHeader({ classes: "app-custom-classes" }) }}
 {% endblock %}{% endraw %}</code></pre>
@@ -99,7 +99,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the header component by rendering your own,
           which can include custom <code>homepageUrl</code>
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block header %}
     {{ govukHeader({ homepageUrl: "/custom-url" }) }}
 {% endblock %}{% endraw %}</code></pre>
@@ -121,7 +121,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the header component by rendering your own,
           which can include a custom <code>serviceName</code>
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block header %}
     {{ govukHeader({ serviceName: "Custom service name" }) }}
 {% endblock %}{% endraw %}</code></pre>
@@ -137,7 +137,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the header component by rendering your own,
           which can include a custom <code>navigation</code>
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block header %}
     {{ govukHeader({ navigation: [] }) }}
 {% endblock %}{% endraw %}</code></pre>
@@ -174,7 +174,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the footer component by rendering your own,
           which can include a custom <code>navigation</code>
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block header %}
     {{ govukFooter({ navigation: [] }) }}
 {% endblock %}{% endraw %}</code></pre>
@@ -190,7 +190,7 @@ The main change is changing variables from [snake_case](https://en.wikipedia.org
           You can now entirely replace the footer component by rendering your own,
           which can include custom <code>meta</code> links
         </p>
-        <pre><code>{% raw %}
+        <pre><code tabindex="0">{% raw %}
 {% block header %}
     {{ govukFooter({ meta: [] }) }}
 {% endblock %}{% endraw %}</code></pre>

src/stylesheets/components/_tabs.scss

@@ -160,13 +160,4 @@
   outline: 1px solid transparent;
   color: $govuk-text-colour;
   background-color: govuk-colour("light-grey");
-
-  &:focus {
-    border: $govuk-focus-width solid $govuk-input-border-colour;
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-  }
-
-  .js-enabled & {
-    padding-top: 45px; // Allow extra space for the copy code button
-  }
 }

src/stylesheets/main.scss

@@ -283,6 +283,15 @@ pre code {
   background-color: $app-light-grey;
   font-size: 16px;
   @include govuk-responsive-margin(4, "bottom");
+
+  &:focus {
+    border: $govuk-focus-width solid $govuk-input-border-colour;
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+  }
+
+  .js-enabled [data-module="app-copy"] & {
+    padding-top: 45px; // Allow extra space for the copy code button
+  }
 }
 
 .app-prose-scope {