markup: Add tabindex="0" to default <pre> wrapper

Currently the generated `<pre>` element isn't fully accessible as it can't be focused by keyboard users.
To make this fully accessible, the attribute `tabindex="0"` should be added to the `<pre>` tag.

Closes #7194

diff --git a/hugolib/embedded_shortcodes_test.go b/hugolib/embedded_shortcodes_test.go
index 9fb25e22a74a735151c0793daa9dabfc457c224f..53ad2fe8efb3186340853aab0bfd709c2b347c28 100644 (file)
--- a/hugolib/embedded_shortcodes_test.go
+++ b/hugolib/embedded_shortcodes_test.go
@@ -89,13 +89,13 @@ func TestShortcodeHighlight(t *testing.T) {
                        `{{< highlight java >}}
 void do();
 {{< /highlight >}}`,
-                       `(?s)<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java"`,
+                       `(?s)<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java"`,
                },
                {
                        `{{< highlight java "style=friendly" >}}
 void do();
 {{< /highlight >}}`,
-                       `(?s)<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">`,
+                       `(?s)<div class="highlight"><pre tabindex="0" style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">`,
                },
        } {
 

diff --git a/hugolib/page_test.go b/hugolib/page_test.go
index 5bc3db22fb4b9b0497bce76ebb9e9ecfc6ee6fb8..7a1ff6c4e225f586ac869464bdca5a6328618acd 100644 (file)
--- a/hugolib/page_test.go
+++ b/hugolib/page_test.go
@@ -1731,12 +1731,12 @@ $$$
 
        // Blackfriday does not support this extended attribute syntax.
        b.AssertFileContent("public/page1/index.html",
-               `<pre><code class="language-bash {hl_lines=[1]}" data-lang="bash {hl_lines=[1]}">SHORT</code></pre>`,
-               `<pre><code class="language-bash {hl_lines=[1]}" data-lang="bash {hl_lines=[1]}">MARKDOWN`,
+               `<pre tabindex="0"><code class="language-bash {hl_lines=[1]}" data-lang="bash {hl_lines=[1]}">SHORT</code></pre>`,
+               `<pre tabindex="0"><code class="language-bash {hl_lines=[1]}" data-lang="bash {hl_lines=[1]}">MARKDOWN`,
        )
 
        b.AssertFileContent("public/page2/index.html",
-               `<pre><code class="language-bash {hl_lines=[1]}" data-lang="bash {hl_lines=[1]}">SHORT`,
+               `<pre tabindex="0"><code class="language-bash {hl_lines=[1]}" data-lang="bash {hl_lines=[1]}">SHORT`,
        )
 }
 

diff --git a/markup/goldmark/convert_test.go b/markup/goldmark/convert_test.go
index 6e6b0009f9e0292c1c751e106b7c752ecb8e1332..f2c6efedd134a657030cec3975bde8e36cd44252 100644 (file)
--- a/markup/goldmark/convert_test.go
+++ b/markup/goldmark/convert_test.go
@@ -154,7 +154,7 @@ description
        c.Assert(got, qt.Contains, `<h2 id="神真美好-2">神真美好</h2>`, qt.Commentf(got))
 
        // Code fences
-       c.Assert(got, qt.Contains, "<div class=\"highlight\"><pre class=\"chroma\"><code class=\"language-bash\" data-lang=\"bash\">LINE1\n</code></pre></div>")
+       c.Assert(got, qt.Contains, "<div class=\"highlight\"><pre tabindex=\"0\" class=\"chroma\"><code class=\"language-bash\" data-lang=\"bash\">LINE1\n</code></pre></div>")
        c.Assert(got, qt.Contains, "Code Fences No Lexer</h2>\n<pre><code class=\"language-moo\" data-lang=\"moo\">LINE1\n</code></pre>")
 
        // Extensions
@@ -389,7 +389,7 @@ LINE5
 
                result := convertForConfig(c, cfg, `echo "Hugo Rocks!"`, "bash")
                // TODO(bep) there is a whitespace mismatch (\n) between this and the highlight template func.
-               c.Assert(result, qt.Equals, `<div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">echo</span> <span class="s2">&#34;Hugo Rocks!&#34;</span>
+               c.Assert(result, qt.Equals, `<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">echo</span> <span class="s2">&#34;Hugo Rocks!&#34;</span>
 </code></pre></div>`)
                result = convertForConfig(c, cfg, `echo "Hugo Rocks!"`, "unknown")
                c.Assert(result, qt.Equals, "<pre><code class=\"language-unknown\" data-lang=\"unknown\">echo &quot;Hugo Rocks!&quot;\n</code></pre>")
@@ -400,7 +400,7 @@ LINE5
                cfg.NoClasses = false
 
                result := convertForConfig(c, cfg, lines, `bash {linenos=table,hl_lines=[2 "4-5"],linenostart=3}`)
-               c.Assert(result, qt.Contains, "<div class=\"highlight\"><div class=\"chroma\">\n<table class=\"lntable\"><tr><td class=\"lntd\">\n<pre class=\"chroma\"><code><span class")
+               c.Assert(result, qt.Contains, "<div class=\"highlight\"><div class=\"chroma\">\n<table class=\"lntable\"><tr><td class=\"lntd\">\n<pre tabindex=\"0\" class=\"chroma\"><code><span class")
                c.Assert(result, qt.Contains, "<span class=\"hl\"><span class=\"lnt\">4")
 
                result = convertForConfig(c, cfg, lines, "bash {linenos=inline,hl_lines=[2]}")

diff --git a/markup/highlight/highlight.go b/markup/highlight/highlight.go
index 4727843ccdd7f0b5629a1f9dd56cc35107cef16c..772244a916f5accffb74feda1f3c0abc0dbead14 100644 (file)
--- a/markup/highlight/highlight.go
+++ b/markup/highlight/highlight.go
@@ -123,7 +123,7 @@ type preWrapper struct {
 
 func (p preWrapper) Start(code bool, styleAttr string) string {
        w := &strings.Builder{}
-       fmt.Fprintf(w, "<pre%s>", styleAttr)
+       fmt.Fprintf(w, `<pre tabindex="0"%s>`, styleAttr)
        var language string
        if code {
                language = p.language

diff --git a/markup/highlight/highlight_test.go b/markup/highlight/highlight_test.go
index eb8ba3e961ec1062a1be85b9e1ffe1110d4742ba..f68df629a40d1a442e7619df1331aecff3d44aab 100644 (file)
--- a/markup/highlight/highlight_test.go
+++ b/markup/highlight/highlight_test.go
@@ -43,9 +43,9 @@ User-Agent: foo
                h := New(cfg)
 
                result, _ := h.Highlight(`echo "Hugo Rocks!"`, "bash", "")
-               c.Assert(result, qt.Equals, `<div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">echo</span> <span class="s2">&#34;Hugo Rocks!&#34;</span></code></pre></div>`)
+               c.Assert(result, qt.Equals, `<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="nb">echo</span> <span class="s2">&#34;Hugo Rocks!&#34;</span></code></pre></div>`)
                result, _ = h.Highlight(`echo "Hugo Rocks!"`, "unknown", "")
-               c.Assert(result, qt.Equals, `<pre><code class="language-unknown" data-lang="unknown">echo &#34;Hugo Rocks!&#34;</code></pre>`)
+               c.Assert(result, qt.Equals, `<pre tabindex="0"><code class="language-unknown" data-lang="unknown">echo &#34;Hugo Rocks!&#34;</code></pre>`)
        })
 
        c.Run("Highlight lines, default config", func(c *qt.C) {
@@ -54,7 +54,7 @@ User-Agent: foo
                h := New(cfg)
 
                result, _ := h.Highlight(lines, "bash", "linenos=table,hl_lines=2 4-5,linenostart=3")
-               c.Assert(result, qt.Contains, "<div class=\"highlight\"><div class=\"chroma\">\n<table class=\"lntable\"><tr><td class=\"lntd\">\n<pre class=\"chroma\"><code><span class")
+               c.Assert(result, qt.Contains, "<div class=\"highlight\"><div class=\"chroma\">\n<table class=\"lntable\"><tr><td class=\"lntd\">\n<pre tabindex=\"0\" class=\"chroma\"><code><span class")
                c.Assert(result, qt.Contains, "<span class=\"hl\"><span class=\"lnt\">4")
 
                result, _ = h.Highlight(lines, "bash", "linenos=inline,hl_lines=2")
@@ -113,7 +113,7 @@ User-Agent: foo
                h := New(cfg)
 
                result, _ := h.Highlight(lines, "", "")
-               c.Assert(result, qt.Equals, "<pre><code>LINE1\nLINE2\nLINE3\nLINE4\nLINE5\n</code></pre>")
+               c.Assert(result, qt.Equals, "<pre tabindex=\"0\"><code>LINE1\nLINE2\nLINE3\nLINE4\nLINE5\n</code></pre>")
        })
 
        c.Run("No language, guess syntax", func(c *qt.C) {