Add tabindex and focus states to code blocks

CHANGELOG.md

@@ -5,6 +5,7 @@
 - [#210: Fix issue with WCAG 2.1 success criterion 1.3.1 (Info and Relationships)](https://github.com/alphagov/tech-docs-gem/pull/210)
 - [#209: Some search and keyboard navigation updates](https://github.com/alphagov/tech-docs-gem/pull/209)
 - [#214: Implement row level table headings to allow accessible tables with row headings](https://github.com/alphagov/tech-docs-gem/pull/214)
+- [#215: Add tabindex and focus states to code blocks](https://github.com/alphagov/tech-docs-gem/pull/215)
 
 ### Ruby version bump
 

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

@@ -118,11 +118,20 @@
   }
 
   pre {
+    $padding: 15px;
+    $border-width: 1px;
+
     background: $code-00;
-    padding: 15px;
+    padding: $padding;
     overflow: auto;
     position: relative;
-    border: 1px solid $code-02;
+    border: $border-width solid $code-02;
+
+    &:focus {
+      padding: $padding - ($govuk-focus-width - $border-width);
+      border: $govuk-focus-width solid $govuk-focus-text-colour;
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
   }
 
   pre code {

lib/govuk_tech_docs/tech_docs_html_renderer.rb

@@ -74,5 +74,35 @@ def table_row(body)
 
       tr.to_html
     end
+
+    def block_code(text, lang)
+      if defined?(super)
+        # Post-processing the block_code HTML to implement tabbable code blocks.
+        #
+        # Middleman monkey patches the Middleman::Renderers::MiddlemanRedcarpetHTML
+        # to include Middleman::Syntax::RedcarpetCodeRenderer. This defines its own
+        # version of `block_code(text, lang)` which we can call with `super`.
+
+        fragment = Nokogiri::HTML::DocumentFragment.parse(super)
+        fragment.traverse do |element|
+          if element.name == "pre" && element["tabindex"].nil?
+            element["tabindex"] = "0"
+          end
+        end
+        fragment.to_html
+      else
+        # If syntax highlighting with redcarpet isn't enabled, super will not
+        # be `defined?`, so we can jump straight to rendering HTML ourselves.
+
+        fragment = Nokogiri::HTML::DocumentFragment.parse("")
+        pre = Nokogiri::XML::Node.new "pre", fragment
+        pre["tabindex"] = "0"
+        code = Nokogiri::XML::Node.new "code", fragment
+        code["class"] = lang
+        code.content = text
+        pre.add_child code
+        pre.to_html
+      end
+    end
   end
 end

spec/govuk_tech_docs/tech_docs_html_renderer_spec.rb

@@ -1,44 +1,98 @@
+require "middleman-syntax/extension"
+
 RSpec.describe GovukTechDocs::TechDocsHTMLRenderer do
   let(:app) { double("app") }
   let(:context) { double("context") }
   let(:processor) {
+    Redcarpet::Markdown.new(described_class.new(context: context), tables: true, fenced_code_blocks: true)
+  }
+
+  before :each do
     allow(context).to receive(:app) { app }
     allow(app).to receive(:api)
-    Redcarpet::Markdown.new(described_class.new(context: context), tables: true)
-  }
+  end
 
   describe "#render a table" do
-    markdown_table = <<~MARKDOWN
-     |  A   | B |
-     |------|---|
-     |# C   | D |
-     |  E   | F |
-     |# *G* | H |
-    MARKDOWN
+    let(:output) {
+      processor.render <<~MARKDOWN
+        |  A   | B |
+        |------|---|
+        |# C   | D |
+        |  E   | F |
+        |# *G* | H |
+      MARKDOWN
+    }
 
     it "treats cells in the heading row as headings" do
-      output = processor.render markdown_table
-
       expect(output).to include("<th>A</th>")
       expect(output).to include("<th>B</th>")
     end
 
     it "treats cells starting with # as row headings" do
-      output = processor.render markdown_table
       expect(output).to include('<th scope="row">C</th>')
     end
 
     it "treats cells starting with # with more complex markup as row headings" do
-      output = processor.render markdown_table
       expect(output).to match(/<th scope="row"><em>G<\/em>\s*<\/th>/)
     end
 
     it "treats other cells as ordinary cells" do
-      output = processor.render markdown_table
       expect(output).to include("<td>D</td>")
       expect(output).to include("<td>E</td>")
       expect(output).to include("<td>F</td>")
       expect(output).to include("<td>H</td>")
     end
   end
+
+  describe "#render a code block" do
+    let(:output) {
+      processor.render <<~MARKDOWN
+        Hello world:
+
+        ```ruby
+        def hello_world
+          puts "hello world"
+        end
+        ```
+      MARKDOWN
+    }
+
+    context "without syntax highlighting" do
+      let(:processor) {
+        Redcarpet::Markdown.new(described_class.new(context: context), fenced_code_blocks: true)
+      }
+
+      it "sets tab index to 0" do
+        expect(output).to include('<pre tabindex="0">')
+      end
+
+      it "renders the code without syntax highlighting" do
+        expect(output).to include("def hello_world")
+        expect(output).to include('puts "hello world"')
+        expect(output).to include("end")
+      end
+    end
+
+
+    context "with syntax highlighting" do
+      let(:processor) {
+        renderer_class = described_class.clone.tap do |c|
+          c.send :include, Middleman::Syntax::RedcarpetCodeRenderer
+        end
+        Redcarpet::Markdown.new(renderer_class.new(context: context), fenced_code_blocks: true)
+      }
+
+      it "sets tab index to 0" do
+        expect(output).to include('<pre class=" ruby" tabindex="0">')
+      end
+
+      it "renders the code with syntax highlighting" do
+        expect(output).to include("def</span>")
+        expect(output).to include("hello_world</span>")
+        expect(output).to include("puts</span>")
+        expect(output).to include('"hello world"</span>')
+        expect(output).to include("end</span>")
+      end
+    end
+  end
 end