Main content section disappears on skip link activation

[petermakowski]

Summary

Main content section disappears on skip link activation.

This happens because we're using a simple :target technique to toggle visibility of sections. Skip link's target #main-content doesn't match any of the sections therefore all of them are hidden.

Process

1. Visit https://maas.io/tutorials/build-a-maas-and-lxd-environment-in-30-minutes-with-multipass-on-ubuntu
2. Press tab to activate the skip link
3. Press enter to skip to the main section

Current

Main content section disappears

Expected

Main content section remains visible

Screenshot

[sparkiegeek]

What browser, what OS? Doesn't do this for me on Firefox 97.0.1/Ubuntu

[anthonydillon]

This is an issue with using the hash to render the correct section content. Although we should be auto appending a hash (in this case (#1-overview) which switches focus to the main content. You can replicate this issue but reverse tabbing (shift + tab) all the way back up to the skip link.

[sparkiegeek]

What browser, what OS? Doesn't do this for me on Firefox 97.0.1/Ubuntu

Confirm if I press Tab enough times to get to the Skip link then it can mess up the hash