I checked that...

• ... the documentation does not mention anything about my problem
• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... there are no open or closed issues that are related to my problem

Description

Keyboard navigation in this template is great, but there is a case to be improved: scrollable code blocks. In code blocks that have long lines, a horizontal scroll bar appears, which only can be accessed using the mouse. It should be accessible via the keyboard, so you can reach that area using tab and then scroll it using the arrow keys.

Expected behavior

Scrollable areas should be reachable via keyboard.

https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable?application=rocketvalidator

https://webaim.org/techniques/keyboard/tabindex

Actual behavior

Horizontal scrollbars in pre code blocks are not accessible via keyboard.

Steps to reproduce the bug

Navigate via the keyboard on a page that has code blocks with long lines so the horizontal scrollbars appear. Try to scroll it without using the mouse.

Package versions

• Python: 3.7.7
• MkDocs: 1.1
• Material: 5.0.0rc2

Project configuration

site_name: Rocket Validator Documentation
nav:
    - Home: index.md
    - API: api.md
theme:
  name: material
  language: en
  logo: img/rocket-icon-300x300.png
extra:
  social:
    - icon: fontawesome/brands/github-alt
      link: https://github.com/rocketvalidator
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/rocketvalidator
    - icon: fontawesome/brands/linkedin
      link: https://pr.linkedin.com/company/rocket-validator
google_analytics:
  - UA-81204018-1
  - auto
markdown_extensions:
- admonition
- pymdownx.superfences
- codehilite:
    guess_lang: false
extra_css:
    - css/extra.css

System information

• OS: macOS 10.15.3
• Browser: Chrome 80

Proposed solution

Adding tabindex=0 to the pre code elements makes them focusable via keyboard without altering the tab order. This is the proposed solution in the linked pages above.

I've tried this in https://docs.rocketvalidator.com/api/ and it works fine (you may need to reload the page if you have visited it recently to refresh the cache).

To add the attribute I'm using JS:

rocketvalidator/docs-rocketvalidator@d2e1d90

This works fine, but I need to deactivate the instant loading feature as it looks like the JS won't be executed on page change. Is there a way to fix this?

Maybe tabindex=0 could be included in the template itself so we don't need this JS fix?

Are there other options like fixing this via CSS or maybe an extension configuration?