Code snippets are not scrollable by keyboard users

[sbeaumontweb]

Proposing fix by adding a tabindex to the code blocks to allow sideways scrolling to make content readable for keyboard users when it overflows.

[mathalete]

Good spot.

Maybe better to have a listener to determine if there is overflow on the code container, and add the tabindex dynamically when it's needed.

Something like if scrollWidth > clientWidth on the container, then add tabindex="0" if not, don't.

If we're adding a tabindex (statically or dynamically), it'd be recommended to also add an aria role and accessible name so if you can't see the screen, and you are tabbing through it, it's clear why this guy is receiving focus.

<div role="group" tabindex="0" aria-labelledby="[code block name in page]">....</div>