Add skip-links to editor (and perhaps more)

[kmcnaught]

The webpage already has regions defined which is really helpful to allow a screen reader user to navigate more quickly, but (a) not all screen reader users are familiar with the extra shortcuts to allow this, and (b) it doesn't help keyboard-only users, unless they are using a plugin for navigation (again, a small subset of expert users).

It would be great to have a small number of skip links available, for both keyboard users and screen reader users. I'd propose definitely "skip to code editor", possibly "skip to documentation" (depending on how we resolve outstanding tab order inconsistencies - not necessary if it's one of the first tab targets anyway) and "skip to project actions" where the "project actions" might need a clearer label.

Todo

• Discuss desired outcome in context of wider tab order / navigation discussions
• Add skip link(s). Does anyone have a preferred thirdparty skiplink implementation, or is there something available in existing libraries? A quick google showed up this MIT implementation: https://github.com/yanandcoffee/react-skiplinks

Conclusion

[kmcnaught]

I would also be interested in discussing the idea of mid-page skip links to the linting errors pane (currently only accessible with a shortcut key) to improve discoverability, and a skip link after the editor to "Skip to send to micro:bit" as there are several tab stops beforehand (in the simulator region)

[microbit-matt-hillsdon]

Implementation wise, we should take a look at the component from the UI library we're using in the first instance: https://v1.chakra-ui.com/docs/components/navigation/skip-nav