markup: Add tabindex="0" to default <pre> wrapper.

[rhymes]

Currently the generated <pre> element isn't fully accessible as it can't be focused by keyboard users.

An example of syntax highlighting and how the aXe devTools extension detects this issue:

Additional info:

• Deque University: Ensure that scrollable region has keyboard access:

The key to getting a scrollable region to be accessible with the keyboard is to ensure that a keyboard-only user can focus the scrollable region itself or a static text item within the scrollable region.

• Accessibility insights: scrollable-region-focusable

Thus, scrollable content is keyboard accessible only if the scrollable element is focusable or contains a focusable element.

To make this fully accessible, the attribute tabindex="0" should be added to the <pre> tag.

According to MDN's page on tabindex the attribute can have 3 values:

• -1, which means "skip it using sequential tabbing"
• 0, focusable with sequential keyboard navigation (what we want in this case)
• something over 0, which changes the priority of tabbing inside the page

Closes #7194

See also alecthomas/chroma#514

[CLAassistant]

All committers have signed the CLA.

[chrisreddington]

Thank you @rhymes for doing the work on this! I recently encountered the issue on my own site and raised the issue in #8758, so I'm glad to see this merged by @bep so quickly. Great to be a part of this awesome community - Thank you all!

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.