Built in <Code /> component is always focusable when tabbing

[hawkticehurst]

What version of astro are you using?

2.10.3

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Not fully sure if this is considered a bug (apologies if it isn't), but when using the built-in <Code /> component and testing a page for logical tabbing/a11y I discovered the rendered <pre> element of each code component has an attribute of tabindex="0" set, meaning all code blocks will be given focus/render a focus outline when tabbing.

I don't want any of my code blocks to be given focus, but as far as I can tell/find, there's no way to adjust this behavior.

What's the expected result?

Since there's no action/interactivity associated with a default code block, I would expect the code block to not be given focus when tabbing.

If there is an intentional reason for giving focus to code blocks by default, then my alternative expected result would be that that reason be documented here and ideally be given the ability to opt out of this behavior.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-cb934q?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[yanthomasdev]

Thanks for raising this issue @hawkticehurst, what happens is that whenever a code block overflows and generates a scrollbar, it has to be focusable for keyboard-only users to pass WCAG 2.1.1 Sucess Criteria. Our <Code /> component is powered by Shiki, which adds the tabindex="0" as part of their rendering pipeline. Here's the implementation PR on their end.

[natemoo-re]

Thanks @Yan-Thomas! Going to close this as intentional, but would encourage you to chime in on the original Shiki issue directly if you have reason to believe this shouldn't be automatically enabled!

[hawkticehurst]

Ahhh, that totally makes sense. Thank you for chiming in/clarifying @Yan-Thomas! Love a good TIL in the a11y department.

Also thanks for providing a link to the original Shiki issue @natemoo-re! I hadn't been thinking about a focusable pre as a way of satisfying WCAG 2.1.1, so more than happy to leave it as is :)

[andreasvirkus]

The a11y audit of the new dev toolbar marks the tabindex as invalid though 🤔 Does this warrant a new issue?