mirror of
https://github.com/gohugoio/hugo.git
synced 2025-03-24 02:21:38 +00:00
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
This commit is contained in:
parent
ae6cf93c84
commit
f27e542442
5 changed files with 13 additions and 13 deletions
|
@ -89,13 +89,13 @@ func TestShortcodeHighlight(t *testing.T) {
|
||||||
`{{< highlight java >}}
|
`{{< highlight java >}}
|
||||||
void do();
|
void do();
|
||||||
{{< /highlight >}}`,
|
{{< /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" >}}
|
`{{< highlight java "style=friendly" >}}
|
||||||
void do();
|
void do();
|
||||||
{{< /highlight >}}`,
|
{{< /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">`,
|
||||||
},
|
},
|
||||||
} {
|
} {
|
||||||
|
|
||||||
|
|
|
@ -1731,12 +1731,12 @@ $$$
|
||||||
|
|
||||||
// Blackfriday does not support this extended attribute syntax.
|
// Blackfriday does not support this extended attribute syntax.
|
||||||
b.AssertFileContent("public/page1/index.html",
|
b.AssertFileContent("public/page1/index.html",
|
||||||
`<pre><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]}">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]}">MARKDOWN`,
|
||||||
)
|
)
|
||||||
|
|
||||||
b.AssertFileContent("public/page2/index.html",
|
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`,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -154,7 +154,7 @@ description
|
||||||
c.Assert(got, qt.Contains, `<h2 id="神真美好-2">神真美好</h2>`, qt.Commentf(got))
|
c.Assert(got, qt.Contains, `<h2 id="神真美好-2">神真美好</h2>`, qt.Commentf(got))
|
||||||
|
|
||||||
// Code fences
|
// 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>")
|
c.Assert(got, qt.Contains, "Code Fences No Lexer</h2>\n<pre><code class=\"language-moo\" data-lang=\"moo\">LINE1\n</code></pre>")
|
||||||
|
|
||||||
// Extensions
|
// Extensions
|
||||||
|
@ -389,7 +389,7 @@ LINE5
|
||||||
|
|
||||||
result := convertForConfig(c, cfg, `echo "Hugo Rocks!"`, "bash")
|
result := convertForConfig(c, cfg, `echo "Hugo Rocks!"`, "bash")
|
||||||
// TODO(bep) there is a whitespace mismatch (\n) between this and the highlight template func.
|
// 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>`)
|
</code></pre></div>`)
|
||||||
result = convertForConfig(c, cfg, `echo "Hugo Rocks!"`, "unknown")
|
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>")
|
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
|
cfg.NoClasses = false
|
||||||
|
|
||||||
result := convertForConfig(c, cfg, lines, `bash {linenos=table,hl_lines=[2 "4-5"],linenostart=3}`)
|
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")
|
c.Assert(result, qt.Contains, "<span class=\"hl\"><span class=\"lnt\">4")
|
||||||
|
|
||||||
result = convertForConfig(c, cfg, lines, "bash {linenos=inline,hl_lines=[2]}")
|
result = convertForConfig(c, cfg, lines, "bash {linenos=inline,hl_lines=[2]}")
|
||||||
|
|
|
@ -123,7 +123,7 @@ type preWrapper struct {
|
||||||
|
|
||||||
func (p preWrapper) Start(code bool, styleAttr string) string {
|
func (p preWrapper) Start(code bool, styleAttr string) string {
|
||||||
w := &strings.Builder{}
|
w := &strings.Builder{}
|
||||||
fmt.Fprintf(w, "<pre%s>", styleAttr)
|
fmt.Fprintf(w, `<pre tabindex="0"%s>`, styleAttr)
|
||||||
var language string
|
var language string
|
||||||
if code {
|
if code {
|
||||||
language = p.language
|
language = p.language
|
||||||
|
|
|
@ -43,9 +43,9 @@ User-Agent: foo
|
||||||
h := New(cfg)
|
h := New(cfg)
|
||||||
|
|
||||||
result, _ := h.Highlight(`echo "Hugo Rocks!"`, "bash", "")
|
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", "")
|
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) {
|
c.Run("Highlight lines, default config", func(c *qt.C) {
|
||||||
|
@ -54,7 +54,7 @@ User-Agent: foo
|
||||||
h := New(cfg)
|
h := New(cfg)
|
||||||
|
|
||||||
result, _ := h.Highlight(lines, "bash", "linenos=table,hl_lines=2 4-5,linenostart=3")
|
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")
|
c.Assert(result, qt.Contains, "<span class=\"hl\"><span class=\"lnt\">4")
|
||||||
|
|
||||||
result, _ = h.Highlight(lines, "bash", "linenos=inline,hl_lines=2")
|
result, _ = h.Highlight(lines, "bash", "linenos=inline,hl_lines=2")
|
||||||
|
@ -113,7 +113,7 @@ User-Agent: foo
|
||||||
h := New(cfg)
|
h := New(cfg)
|
||||||
|
|
||||||
result, _ := h.Highlight(lines, "", "")
|
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) {
|
c.Run("No language, guess syntax", func(c *qt.C) {
|
||||||
|
|
Loading…
Reference in a new issue