Skip to content

Add skip link

Sarah German requested to merge nav-skip-link into main

What does this MR do and why?

Adds a skip link to the page header.

Current behavior

  • Focus starts in the top navbar and traverses through the entire sidebar navigation before getting into the page content.

New behavior

  • Focus starts with the skip link, which is visible when it receives focus.
  • Activating the skip link places focus on the h1.
  • Tabbing traverses through the page content.

This implementation is mostly a copy of gitlab-org/gitlab-services/design.gitlab.com!2588 (merged).

Closes gitlab-org/gitlab-docs#1719 (closed)

Closes #70 (closed)

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md.
  2. Load an interior page (anything but the homepage), and hit the Tab key. The skip button should appear.
  3. Hit enter, and your keyboard will focus on the h1.
  4. Hit tab and you will be traversing through the main content of the page.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sarah German

Merge request reports