Accessibility - Scrollable region (pre) must have keyboard access

[BogdanCerovac]

Describe the bug
pre regions usually need scrollbars and react-syntax-highlighter scrollbars are currently not accessible for keyboard users.

This is failing WCAG 2.1.1 and besides causing barriers to keyboard only users also failing conformance to WCAG of the whole page.
Automatic accessibility testing tools like axe report this as serious bug under WCAG 2.1.1 success criterion.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/
2. Use axe browser extension and run tests without best practices
3. Scroll down to 'Scrollable region must have keyboard access'
4. See element location (<pre style="display: block; overflow-x: auto; background: rgb(43, 43, 43); color: rgb(248, 248, 242); padding: 0.5em;">)

Expected behavior
As a keyboard only user I should be able to scroll to see the whole situation

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: All

Smartphone (please complete the following information):

• Device: All (yes, there are keyboard only users on mobiles and tablets)
• OS: All
• Browser: All
• Version: All

Fix
Add tabindex="0" to pre so that it will always get keyboard focus;

<!-- should be; -->
<pre tabindex="0" style="display: block; overflow-x: auto; background: rgb(43, 43, 43); color: rgb(248, 248, 242); padding: 0.5em;">
<!-- code -->
</pre>