Scrollable areas not keyboard-accessible

[missmatsuko]

Description

Elements with the style overflow: auto; become scrollable when their content overflows their container. However, the scrollbars cannot be controlled using keyboard alone.

Firefox seems to be the only browser that does make such elements keyboard-focusable. There's an open issue for WebKit (Safari). The issue has been fixed in Chromium, but it's not actually reflected in Edge and Chrome, possibly due to this related issue.

Until browsers handle this by default, the recommended solution is to add tabindex="0" to the containing element. Ideally this will only be added to elements that are actually scrollable so that there aren't extra tab stops for non-interactive content.

References

• Deque University: Ensure that scrollable region has keyboard access
• Paciello Group: Short note on improving usability of scrollable regions

Steps to reproduce

Use keyboard to tab through a page with a scrollable element. Except in Firefox, the scrollable element won't be focusable and controllable by keyboard.

If you have content in project config, there should be such a scrollable element at Utilities → Project Config (/admin/utilities/project-config) under the heading "Loaded Project Config Data".

Additional info

• Craft version: 3.5.16

[brandonkelly]

Added tabindex="0" attributes for all places I could find this being a potential issue:

• The diff pane and loaded config pane in the Project Config utility
• Stack trace modals in the Deprecation Warnings utility
• The error details pane in the updater, in the event of a failed update / plugin installation