Accessibility - scrollable code region should be focusable

[kburk1997]

Bug Report

Steps to reproduce

1. Go to develop preview
2. Scroll down until code samples are visible
3. Shrink window size until scrollbars appear on code samples
4. Run axe-devtools automated checker

Current behaviour

Axe-devtools produces the following issue:

Scrollable region must have keyboard access

Ensure elements that have scrollable content are accessible by keyboard

Element Info

Element location:

pre[data-lang="js"][v-pre=""]:nth-child(10) > .lang-js

Element source:

<code class="lang-js">

Screenshot

About this issue:

Test Name: Docsify Preview
Test URL: https://docsify-preview.vercel.app/#/configuration?id=homepage
Impact: Serious
Found on: 9/12/2023 at 10:54 am
Found: Automatically
Issue tags: cat.keyboard, wcag2a, wcag211, TTv5, TT4.a
Help: Scrollable region must have keyboard access

Expected behaviour

Running axe-devtools should not produce the above error.

Code snippets should be scrollable so that keyboard-only users can read the code snippet's contents by scrolling.

Other relevant information

• Docsify version: develop

• Bug still occurs when all/other plugins are disabled?

• Docsify plugins (if the bug happens when plugins enabled, please try to isolate the issue): none

[jhildenbiddle]

Thanks for creating the issue, @kburk1997!

I've created a draft PR here: #2264. In that PR you will find a preview link which will allow you to review the changes:

Before I mark this PR as ready for review by the maintainers, I would love to get your thoughts and/or feedback.

Thanks!