Documentation skip links (#30073)

* docs(skip-links): add a skip to main navigation skip link

* docs(skip-links): revamp skip-links pattern

* docs(navs): use aria-label on navs

* docs(navs): use 'docs navigation' label in sidebar nav

5 files changed, 14 insertions, 16 deletions

diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
index ab59339d0..c573e4548 100644
--- a/site/assets/scss/_skippy.scss
+++ b/site/assets/scss/_skippy.scss
@@ -1,17 +1,13 @@
 .skippy {
-  display: block;
-  padding: 1em;
+  position: fixed;
+  top: .5rem;
+  left: .5rem;
+  z-index: $zindex-fixed;
+  padding: .5rem;
   color: $white;
-  text-align: center;
   background-color: $bd-purple;
-  outline: 0;
 
   &:hover {
     color: $white;
   }
 }
-
-.skippy-text {
-  padding: .5em;
-  outline: 1px dotted;
-}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 20b86ab12..3a994c39d 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,5 +1,5 @@
 <header class="navbar navbar-expand navbar-dark bd-navbar">
-  <div class="container-xl flex-wrap flex-md-nowrap">
+  <nav class="container-xl flex-wrap flex-md-nowrap" aria-label="Main navigation">
     <a class="navbar-brand mr-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
     </a>
@@ -54,5 +54,5 @@
     </ul>
 
     <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
-  </div>
+  </nav>
 </header>
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 137596004..772cbd7f7 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -1,4 +1,4 @@
-<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
+<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation">
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 7cb10e960..08f205897 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -1,4 +1,4 @@
-<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
+<nav class="bd-subnavbar pt-2 pb-3 pb-md-2" aria-label="Secondary navigation">
   <div class="container-xl d-flex align-items-md-center flex-wrap">
     <form class="bd-search mb-2 mb-md-0 mr-auto">
       <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
index 25c33fdc3..a060e714b 100644
--- a/site/layouts/partials/skippy.html
+++ b/site/layouts/partials/skippy.html
@@ -1,3 +1,5 @@
-<a class="skippy sr-only-focusable" href="#content">
-  <span class="skippy-text">Skip to main content</span>
-</a>
+<a class="skippy sr-only-focusable" href="#content">Skip to main content</a>
+
+{{ if (eq .Page.Layout "docs") }}
+  <a class="skippy sr-only-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
+{{- end }}