Code Snippets are not accessible

[ewaDev]

Describe the bug
On desktop, user cannot navigate to the code snippet using keyboard only. User cannot put the snippet in focus, cannot scroll through it or have it read by

To Reproduce

1. Create a new post.
2. Insert a code snippet with a long line - for example :

console.log("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

3. Publish.
4. On desktop try do navigate to the snippet using keyboard. You can't.
5. Attempt to scroll through to the end of the snippet - you can't.
6. This also means that the code snippets are not read by a screen reader.

Expected behavior

1. User should be able to navigate to a code snippet using a keyboard
2. User should be able to interact with the code snippet using the keyboard
3. Screen Reader should pick up

Screenshots

Not needed.

Desktop (please complete the following information):

• OS, version:
• Browser, version:

Smartphone (please complete the following information):

• Device: Dell Laptop
• OS, version: Windows
• Browser, version: Version 85.0.4183.102 (Official Build) (64-bit)

Additional context

[github-actions]

Thanks for the issue! We'll take your request into consideration and follow up if we decide to tackle this issue.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss and we will follow up within 3 business days.

For full info on how to contribute, please check out our contributors guide.

[Amorpheuz]

Hey @rhymes, I would love to give this a shot if it's still up for grabs.

[citizen428]

Hi @Amorpheuz, please don't ping individual team members unless it's part of an ongoing discussion. rhymes is off this week. I'll assign you the issue now.

[Amorpheuz]

Oh, Sorry folks. Thanks for the help citizen.

[citizen428]

This issue is up for grabs again. If you want to work on it it's probably advisable to have a look at the closed PR further up and read some of the comments there.

[andreamartz]

@nickytonline and @cmgorton I'd like to take this issue.

[andreamartz]

I'm sorry. Can I be unassigned this issue? I've overcommitted.

[cmgorton]

No problem @andreamartz . I'll unassign you.

[moopet]

As far as the scrolling is concerned, I've noticed that in Firefox/Windows, no horizontal scrollbar appears until you focus or hover the code area, wherease in Chrome/Windows or Firefox/Chrome/Safari on Mac/Arch it's fine.

Without a scrollbar, there's no indication that code goes over the line, and with many people folding code across lines it can be misleading.