Change the way focus is set in skip link example code

[zacharesmer]

Description of Problem

The example code in the skip link section of the accessibility best practices documentation, resets the focus to the skip link every time the route changes. This brings the link into focus and shows it every time. This is technically functional, but defeats the purpose of hiding it with CSS, and doesn't match the behavior on the documentation website itself (or a few others I checked, like Wikipedia, github, w3.org). If the goal is to replicate the way regular web page navigation would affect the focus, then it should be reset to somewhere directly before the skip link.

Expected behavior: On a route change, the skip link is hidden, and when you press tab it appears and is focused.

Actual behavior: On a route change, the skip link is visible and focused. Pressing tab moves the focus to whatever the next element is.

Also, in the current example code the skip link list still has visible bullet points, so I added some CSS to hide those.

Proposed Solution

The Vue theme sets the focus to a backToTop <span> element directly before the skip link. This way the skip link will only ever be focused if someone presses tab just after there is a route change. This seems to be more in line with what most web pages with a hidden skip link do.

Additional Information

For easy reference, WCAG skip link success criteria

[netlify]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	c5b5e8c
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/6796c1c2c48a7f00083a455b
😎 Deploy Preview	https://deploy-preview-3164--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.