search

11ty / eleventy-plugin-syntaxhighlight

A pack of Eleventy plugins for syntax highlighting in Markdown, Liquid, and Nunjucks templates.
https://www.11ty.dev/docs/plugins/syntaxhighlight/
MIT License
130 stars 32 forks source link

Add `tabindex="0"` by default #49

Open zachleat opened 3 years ago

zachleat commented 3 years ago

via #48 and more specifically this comment by @chrisbrownie55 https://github.com/11ty/eleventy-plugin-syntaxhighlight/issues/22#issuecomment-817145606

zachleat commented 1 year ago

Hmm, if the region is not scrollable—is tabindex desirable? Not sure if this should be a default change…

andria-dev commented 1 year ago

@zachleat I think it'd be more desirable than making all code blocks with scrollbars inaccessible to keyboard users and others that need to scroll without a pointer device. A possible alternative would be to use a ResizeObserver on code blocks and determine if a scrollbar is present by checking if element.scrollHeight > element.clientHeight and then apply tabindex="0" or remove it.

I think the most accessible solution would probably be a progressive enhancement where we start with tabindex="0" by default and then include a script that'll do the above ResizeObserver technique to remove or add tabindex="0" when a code block changes shape.