Skip to main content link (#1857)

cal-itp · Jan 24, 2024 · 5f41656 · 5f41656
2 parents 4ba66e8 + 754b615
commit 5f41656
Show file tree

Hide file tree

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

diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-12-14 21:35+0000\n"
+"POT-Creation-Date: 2024-01-19 00:29+0000\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -28,7 +28,7 @@ msgstr ""
 msgid "Cal-ITP Benefits"
 msgstr ""
 
-msgid "Skip to Main Content"
+msgid "Skip to main content"
 msgstr ""
 
 msgctxt "image alt text"

diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-12-14 21:35+0000\n"
+"POT-Creation-Date: 2024-01-19 00:29+0000\n"
 "Language: Español\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -33,7 +33,7 @@ msgstr ""
 msgid "Cal-ITP Benefits"
 msgstr "Cal-ITP Benefits"
 
-msgid "Skip to Main Content"
+msgid "Skip to main content"
 msgstr "Saltar al contenido principal"
 
 msgctxt "image alt text"

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -41,6 +41,10 @@
   --font-size-12px: calc(12rem / 16);
   --border-width: calc(2rem / 16);
   --border-radius: calc(3rem / 16);
+  --focus-style: 3px solid var(--focus-color);
+  --focus-border-radius: calc(2rem / 16);
+  --focus-outline-offset: calc(2rem / 16);
+  --focus-border-radius: calc(2rem / 16);
 }
 
 @font-face {
@@ -127,7 +131,7 @@ a:not(.btn):not(.card) {
   text-decoration: underline;
   text-decoration-style: solid;
   font-weight: var(--bold-font-weight);
-  border-radius: calc(2rem / 16); /* for the focus ring */
+  border-radius: var(--focus-border-radius);
 }
 
 a:hover:not(.btn) {
@@ -137,8 +141,8 @@ a:hover:not(.btn) {
 
 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;
+  outline: var(--focus-style) !important;
+  outline-offset: var(--focus-outline-offset) !important;
 }
 
 a:visited:not(.btn) {
@@ -284,16 +288,21 @@ main {
   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;
+  height: auto;
   outline: none !important;
   box-shadow: none;
+  padding: 1rem 0;
+  background: var(--bs-white);
+}
+
+#skip-to-content:focus span {
+  outline: var(--focus-style) !important;
+  outline-offset: var(--focus-outline-offset) !important;
+  font-weight: var(--bold-font-weight);
+  border-radius: var(--focus-border-radius);
 }
 
 /* Footer */