Add tabindex to highlight template func markup

[gpanders]

Code blocks generated through the {{ highlight }} shortcode or through the use of Markdown code fences should have the tabindex="0" attribute, allowing them to be tab focusable. This is good for accessibility; see here.

I've searched through the docs and I cannot find any way to set this attribute myself in my own site, since the highlight shortcode is (apparently) built-in to Hugo, so I don't think there is any way to do this outside of a change to Hugo itself.

[bep]

so I don't think there is any way to do this outside of a change to Hugo itself.

You can copy this into your project:

https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/highlight.html

[bep]

Never mind that comment, I see that the shortcode is just delegating to the internal template func.

[faraixyz]

The internal function wraps the code in a div tag.

hugo/markup/highlight/highlight.go

Lines 88 to 92 in f0266e2

	fmt.Fprint(w, `<div class="highlight">`)
	if err := formatter.Format(w, style, iterator); err != nil {
	return "", err
	}
	fmt.Fprint(w, `</div>`)

Would it be possible to move this to the short code?

hugo/tpl/tplimpl/embedded/templates/shortcodes/highlight.html

Line 1 in 64789fb

{{ if len .Params | eq 2 }}{{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }}{{ else }}{{ highlight (trim .Inner "\n\r") (.Get 0) "" }}{{ end }}

That way users have more flexibility in wrapping the generated pre block.

[faraixyz]

Hey again, I was thinking of this again since #8280 with attribute lists for code fences. Would it be possible to have a way to specify default attributes for code fences?

[sephore]

Browsers like Firefox will allow scrollable elements to be tab focusable by default, so maybe it's a browser-level issue? I've been injecting tabindexes with replaceRE as a temporary workaround for Chrome users and etc, but it really sounds like a hack.

Edit: Oh yeah. And while using tabindex, Firefox is the one complaining about accessibility. 🤣 (Even tho it works fine.)

By forcing tabindex in ALL elements (even if not scrollable), the issue becomes "Focusable elements should have interactive semantics".

[rhymes]

@sephore I have opened a PR to fix it here #8568 - I used Firexo and generated a demo Hugo site with highlighting and I wasn't able to focus on <pre>, you need that for accessibility purposes, see the documentation in the PR