fix(a11y): improve keyboard accessibility in tablist

[bbsmooth]

Checklist:

• [x] I have read freeCodeCamp's contribution guidelines.
• [x] My pull request has a descriptive title (not a vague title like Update index.md)
• [x] My pull request targets the main branch of freeCodeCamp.
• [x] I have tested these changes locally on my machine.

There is an accessibility issue with the tablist when using a keyboard. If you do not have the editor set to accessibility mode, then when you arrow to the Code tab, the focus will automatically be placed in the editor, and thus you must get back into the tablist to continue navigating the tabs if you didn't want to use the editor in the first place.

In general, moving to a tab should not automatically move your keyboard focus, the user should have to use the Tab key to move into the tab pane, but I can understand the advantages of setting the focus in the editor if the user is not using a keyboard (although we did just have a mobile user complaining about the keyboard constantly popping up when they were trying to scroll the editor). So I have created a fix that will allow the editor to check if the user is using a keyboard to navigate the tablist list and if so it will not set the focus inside itself when the user navigates to the Code tab.

While I was at it, I also added an accessibility fix for the Tests tab that will both allow screen reader users to navigate the content in the pane and allow keyboard users to scroll the content if needed. Finally, I added the --blue-mid focus outline to the tabs. I'm not sure if we've settled on this color for the focus indicator though. Also, it will only show when using the keyboard.

[gitpod-io[bot]]

[codesee-maps[bot]]

:eyes: Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[ojeytonwilliams]

Hey @bbsmooth, sorry for letting this one languish - it completely slipped under my radar.

This looks much more idiomatic now, so thanks for taking care of that. If you've got a sec to fix the conflicts and linting, that would be awesome. I don't trust myself not to break something!

[raisedadead]

Hey @bbsmooth - how is it going? Hope you are doing good. Just checking in.

[bbsmooth]

@raisedadead Thanks for asking. I'm good now. I've resolved all the conflicts.