rehype-pretty / rehype-pretty-code

Beautiful code blocks for Markdown or MDX.

Home Page:https://rehype-pretty.pages.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Accessibility: scrollable regions should be keyboard-focusable

isaacmattern opened this issue · comments

While running axe dev tools on code blocks generated by rehype-pretty-code (on my own site and on rehype-pretty-code's documentation site), I'm given the error "Scrollable region must have keyboard access".

I believe that this issue can be fixed by adding an attribute of tabindex="0" to each <pre> element which is horizontally scrollable.

Example of problem and fix by adding tabindex attribute

Axe Devtools

Screenshot 2023-09-19 at 11 19 37 PM

The latest Shiki version adds this to the pre tag.