eleventy-plugin-syntaxhighlight icon indicating copy to clipboard operation
eleventy-plugin-syntaxhighlight copied to clipboard

Published 20 hours ago • verified publisher icon 11ty

Add `tabindex="0"` by default

Open zachleat opened this issue 4 years ago • 2 comments

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

zachleat avatar May 23 '21 19:05 zachleat

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

zachleat avatar Apr 12 '23 19:04 zachleat

@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.

andria-dev avatar Apr 12 '23 23:04 andria-dev