diff options
author | rhymes <github@rhymes.dev> | 2021-07-15 17:48:39 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-15 17:48:39 +0300 |
commit | f27e542442d19436f1428cc22bb03aca398d37a7 (patch) | |
tree | 9f3b53dc99405d4bcd4957a4ada4bd0077d5818c | |
parent | ae6cf93c84c3584b111f4b9fa3fb4e3f63d37915 (diff) |
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
-rw-r--r-- | hugolib/embedded_shortcodes_test.go | 4 | ||||
-rw-r--r-- | hugolib/page_test.go | 6 | ||||
-rw-r--r-- | markup/goldmark/convert_test.go | 6 | ||||
-rw-r--r-- | markup/highlight/highlight.go | 2 | ||||
-rw-r--r-- | markup/highlight/highlight_test.go | 8 |
5 files changed, 13 insertions, 13 deletions
diff --git a/hugolib/embedded_shortcodes_test.go b/hugolib/embedded_shortcodes_test.go index 9fb25e22a..53ad2fe8e 100644 --- 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 5bc3db22f..7a1ff6c4e 100644 --- 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 6e6b0009f..f2c6efedd 100644 --- 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">"Hugo Rocks!"</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">"Hugo Rocks!"</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 "Hugo Rocks!"\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 4727843cc..772244a91 100644 --- 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 eb8ba3e96..f68df629a 100644 --- 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">"Hugo Rocks!"</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">"Hugo Rocks!"</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 "Hugo Rocks!"</code></pre>`) + c.Assert(result, qt.Equals, `<pre tabindex="0"><code class="language-unknown" data-lang="unknown">echo "Hugo Rocks!"</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) { |