search

bbc / gel

https://bbc.github.io/gel
39 stars 15 forks source link

Code snippets are not scrollable by keyboard users #162

Open sbeaumontweb opened 3 years ago

sbeaumontweb commented 3 years ago

Screenshot 2021-06-30 at 17 39 43

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 commented 1 year ago

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>