Add a11y support for tabindex="0" to make scrollable pre focusable

[rhymes]

What problem does this feature solve?

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

An example of syntax highlighting (using Hugo) 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.

What feature do you propose?

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

[alecthomas]

Sounds reasonable, PR welcome.

[rhymes]

@alecthomas thanks! Done: #515