ENH: Add skip to main content button for a11y (#1019)

12rambau · choldgraf · web-flow · commit 2e1cfabf1c2d · 2022-10-20T01:09:56.000-07:00
Co-authored-by: Chris Holdgraf &lt;choldgraf@gmail.com&gt;
diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss
@@ -33,6 +33,7 @@ $grid-breakpoints: (
 @import "./base/base";
 
 // Major theme layout, skeleton, and whitespace
+@import "./sections/skip-link";
 @import "./sections/container";
 @import "./sections/announcement";
 @import "./sections/article";
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss b/src/pydata_sphinx_theme/assets/styles/sections/_skip-link.scss
@@ -0,0 +1,23 @@
+/*******************************************************************************
+ * Rules for the UX/UI of skip navigation link btn. It's only visible to people
+ * navigating with keyboard for accecibility purposes
+ * ref: https://www.youtube.com/watch?v=VUR0I5mqq7I
+ */
+.skip-link {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  background-color: var(--pst-color-background);
+  color: var(--pst-color-link);
+  padding: 0.5rem;
+  translate: 0 -100%;
+  transition: translate 150ms ease-in-out;
+  z-index: $zindex-modal;
+  border-bottom: 1px solid var(--pst-color-border);
+
+  &:focus {
+    translate: 0;
+  }
+}
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html
@@ -46,6 +46,11 @@
   {# set up with scrollspy to update the toc as we scroll #}
   {# ref: https://getbootstrap.com/docs/4.0/components/scrollspy/ #}
   <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="180" data-default-mode="{{ default_mode }}">
+
+  {# A button hidden by default to help assistive devices quickly jump to main content #}
+  {# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #}
+  <a class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a>
+
 {%- endblock %}
 
 {%- block content %}
@@ -84,7 +89,7 @@
       <div class="bd-sidebar-primary bd-sidebar{% if not sidebars %} hide-on-wide{% endif %}">
         {% include "sections/sidebar-primary.html" %}
       </div>
-      <main class="bd-main">
+      <main id="main-content" class="bd-main">
         {# Main content area #}
         {% block docs_main %}
         <div class="bd-content">
