ENH - Make code blocks focusable

[trallard]

Right now, the code blocks (highlight) are not focusable, which makes them hard to navigate or inaccessible to readers using only their keyboards or screenreaders.

This can be fixed by ensuring the elements have a tabindex="0".

See an example of a focusable code block from gov.uk

https://user-images.githubusercontent.com/23552331/210860704-3ad04477-0f16-48bb-a065-a420e68d21a6.mp4

Originally posted by @trallard in https://github.com/pydata/pydata-sphinx-theme/issues/1095#issuecomment-1372621352 -> the effort to add a max-height and scrollbar and making the pre elements focusable are independent.

And since I opened this and have been making plenty of noise, I will send a PR tomorrow.

[gabalafou]

Looking into this today, I realized that we have two problems to fix:

1. the code blocks are not focusable
2. the site intercepts the left and right arrow keys

So even if we fix (1), a keyboard user won't be able to scroll, for example, code blocks with long lines, using the left-right arrow keys. But isn't that the point of making scrollable regions focusable? -> so that a keyboard user can focus the code block then scroll the content in the block using just the keyboard?

[gabalafou]

Forgot to mention, the site intercepts the left and right arrow keys in order to navigate to the previous/next pages from the current page in the documentation. Tania and I have chatted about this before.

Probably a violation of WCAG 2.1.4 - Character Key Shortcuts (Level A)

[gabalafou]

I should also mention that the first time I encountered the left/right arrow key behavior in the PST docs, I was taken by surprise. I'm really not used to websites using those as keyboard shortcuts to navigate from one page to another.

[gabalafou]

Digging into this, the most relevant PR I could find was #87, which removed some custom JS in favor of using Sphinx theme.conf navigation_with_keys = True. But I wasn't able to dig further to see if I could find some pull request or issue with discussion around why this behavior was adopted by the theme in the first place.

[gabalafou]

Pinging @choldgraf, since he authored #87

[12rambau]

looking at the sphinx gallery of themes, the only one using this functionality are:

• jupyter books
• pydata-sphinx-theme
• insipid

[drammock]

I disable it on my sites, but I have no idea how many sites out there set it to True 🤷🏻 so I'm hesitant to remove it. I think the reasons above are sufficient to justify making it default to False though (with a deprecation cycle)

[trallard]

Agree with @drammock - seems the best would be to set this to False and add a proper depreciation notice/warning/process.

[choldgraf]

+1 to defaulting to false. IMO we should go with whatever is the gold standard for keyboard based interaction , and not feel too constrained by previous functionality