Feat: Skip Nav (#1645)

cal-itp · Aug 14, 2023 · 035bb78 · 035bb78
2 parents e36324e + 43258e2
commit 035bb78
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -43,9 +43,9 @@
       {% include "core/includes/debug.html" %}
     {% endif %}
     <header role="banner" id="header">
-      <div id="skip-to-content">
-        <a href="#main-content">{% translate "Skip to Main Content" %}</a>
-      </div>
+      <a id="skip-to-content"  href="#main-content" class="d-block w-100">
+        <div class="container">{% translate "Skip to Main Content" %}</div>
+      </a>
       {% if messages %}
         {% for message in messages %}
           {% include "core/includes/alert.html" with message=message %}

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -35,6 +35,7 @@
   --font-size-24px: calc(24rem / 16);
   --font-size-20px: calc(20rem / 16);
   --font-size-18px: calc(18rem / 16);
+  --font-size-15px: calc(15rem / 16);
   --font-size-16px: calc(16rem / 16);
   --font-size-14px: calc(14rem / 16);
   --font-size-12px: calc(12rem / 16);
@@ -129,8 +130,8 @@ a:hover:not(.btn) {
   text-decoration: underline;
 }
 
-a:focus:not(.btn):not(.card):not(.footer-link),
-a:focus-visible:not(.btn):not(.card):not(.footer-link) {
+a:focus:not(.btn):not(.card):not(.footer-link):not(#skip-to-content),
+a:focus-visible:not(.btn):not(.card):not(.footer-link):not(#skip-to-content) {
   outline: 3px solid var(--focus-color) !important;
   outline-offset: 2px !important;
 }
@@ -274,6 +275,22 @@ main {
   min-height: var(--main-content-min-height);
 }
 
+#skip-to-content {
+  left: unset !important;
+  transform: none;
+  overflow: hidden;
+  background: var(--focus-color);
+  font-size: var(--font-size-15px);
+  line-height: var(--bs-body-line-height);
+  letter-spacing: calc(var(--font-size-15px) * var(--letter-spacing-5));
+}
+
+#skip-to-content:focus {
+  height: 21px !important;
+  outline: none !important;
+  box-shadow: none;
+}
+
 /* Footer */
 :root {
   --footer-background-color: var(--dark-color);