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

diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
index ab59339d0430ea82a11dc0af7582d2bc6f84de98..c573e45484efa223acc42afea4d1e10df223ffed 100644 (file)
--- 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 20b86ab1287e588a50f4c568df077f99b8635224..3a994c39d8908a0f0be1e853065acfbbe9f9ebc0 100644 (file)
--- 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 137596004d5a3f1d662ef459f1b4cb9927d83235..772cbd7f739d0ac5dd2873e29f9fa338d28c54d2 100644 (file)
--- 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 7cb10e96085f6f4dc3e9eaf301b06b46fda6749f..08f205897305d4123a6f8e8d2e4f4b503e611a16 100644 (file)
--- 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 25c33fdc316e04e109e408ee85015e2d2f186d34..a060e714b016ad46e6eb3b997d34d651d082200f 100644 (file)
--- 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 }}