From b1e3394593a2ff4881569ee360e39fa8ce915416 Mon Sep 17 00:00:00 2001 From: Matt Wang Date: Fri, 6 Sep 2024 12:29:57 -0700 Subject: [PATCH] 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! --- assets/js/just-the-docs.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index d249b6d..63b45ea 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -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 %}