Accessibility considerations and fine-tunes

torchbox · Jan 21, 2025 · 9880c5d · 9880c5d
1 parent 19ecc67
commit 9880c5d
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 11 deletions.
diff --git a/tbx/project_styleguide/templates/patterns/organisms/header/header.html b/tbx/project_styleguide/templates/patterns/organisms/header/header.html
@@ -24,9 +24,6 @@
                 {% include "patterns/atoms/icons/icon.html" with name="chevron" classname="header__primary-menu-toggle-icon" %}
             </button>
 
-            {# Mode switcher desktop - hide for now #}
-            {% include "patterns/molecules/mode_switcher/mode_switcher.html" %}
-
             {# Primary mobile navigation #}
             <nav aria-label="Main navigation"  class="primary-nav-mobile" data-primary-mobile-menu>
                 {% wagtailcache 600 "primarynavmobile" current_site.pk is_pattern_library %}
@@ -40,6 +37,9 @@
                     </ul>
                 {% endwagtailcache %}
             </nav>
+
+            {# Mode switcher desktop - hide for now #}
+            {% comment %} {% include "patterns/molecules/mode_switcher/mode_switcher.html" %} {% endcomment %}
         </div>
         {# Mobile menu toggle -  hide for now, will be reused in the secondary nav #}
         {% comment %} <div class="header__menu-toggle grid__header-toggle">

diff --git a/tbx/static_src/sass/components/_skip-link.scss b/tbx/static_src/sass/components/_skip-link.scss
@@ -1,6 +1,7 @@
 @use 'config' as *;
 
 .skip-link {
+    @include z-index('header');
     position: absolute;
     top: -200px;
     left: 0;

diff --git a/tbx/static_src/sass/components/navigation/_primary-nav-desktop.scss b/tbx/static_src/sass/components/navigation/_primary-nav-desktop.scss
@@ -34,6 +34,7 @@ Styles for the primary navigation at desktop (top level)
     }
 
     &__link {
+        @include high-contrast-text-decoration();
         color: var(--color--grey-20);
 
         &:hover {

diff --git a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss
@@ -18,6 +18,7 @@ Styles for the primary navigation at mobile (top level)
     display: block;
     background-color: var(--color--black);
     border: 1px solid var(--color--eclipse);
+    padding: $spacer-mini-plus 0;
 
     @include media-query(menu) {
         display: none;
@@ -45,19 +46,12 @@ Styles for the primary navigation at mobile (top level)
             $color: var(--color--grey-20),
             $interaction-color: var(--color--white)
         );
+        @include high-contrast-text-decoration();
         display: flex;
         padding: 10px $spacer-small;
 
         &:focus {
             @include focus-style();
         }
-
-        #{$root}__item:last-child & {
-            padding-bottom: $spacer-small;
-        }
-
-        #{$root}__item:first-child & {
-            padding-top: $spacer-small;
-        }
     }
 }