Accessibility - scrollable code region should be focusable

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:

Screenshot
Screenshot of scrollable code snippet that is not focusable

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