Add tabindex=0 to all code blocks

Note: this is a bit hacky. Ideally, I'd like to do this at the
markdown level, since this doesn't serve folks who have
JS disabled (among many other things).

Also, curious to see how this interacts with custom highlighters;
needs some more testing!
This commit is contained in:
Matt Wang 2024-09-06 12:29:57 -07:00
parent ce32212026
commit b1e3394593
No known key found for this signature in database
GPG Key ID: 89C91B3EFBFC0C05

View File

@ -566,8 +566,17 @@ jtd.onReady(function(){
{%- endif %}
});
// Copy button on code
// Accessibility: set tabindex=0 on each code highlight block, so screenreaders
// can focus over (particularly important if there's horizontal scroll)
// see: https://dequeuniversity.com/rules/axe/4.9/scrollable-region-focusable?application=axeAPI
jtd.onReady(() => {
document
.querySelectorAll("div.highlight")
.forEach(codeBlock => codeBlock.setAttribute("tabindex", "0"));
});
// Copy button on code
{%- if site.enable_copy_code_button != false %}