Keyboard focus fixes

torchbox · Feb 12, 2025 · 56d91ae · 56d91ae
1 parent e158d24
commit 56d91ae
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 36 deletions.
diff --git a/...tyleguide/templates/patterns/navigation/components/includes/subnav-child-menu-mobile.html b/...tyleguide/templates/patterns/navigation/components/includes/subnav-child-menu-mobile.html
@@ -16,16 +16,16 @@
         </li>
         {% for gchild in child.value.child_links %}
             <li class="sub-nav-mobile__item">
-                <a class="sub-nav-mobile__link sub-nav-mobile__link--no-children" href="{{ gchild.value.url }}">
-                    {{ gchild.value.text }}
+                <a class="sub-nav-mobile__link" href="{{ gchild.value.url }}">
+                    <span class="sub-nav-mobile__link-text">{{ gchild.value.text }}</span>
                     {% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
                 </a>
             </li>
         {% endfor %}
         {% if child.value.section_link %}
             <li class="sub-nav-mobile__item">
-                <a class="sub-nav-mobile__link sub-nav-mobile__link--no-children" href="{{ child.value.section_link.url }}">
-                    {% firstof child.value.section_link_text child.value.section_link %}
+                <a class="sub-nav-mobile__link" href="{{ child.value.section_link.url }}">
+                    <span class="sub-nav-mobile__link-text">{% firstof child.value.section_link_text child.value.section_link %}</span>
                     {% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
                 </a>
             </li>

diff --git a/...ject_styleguide/templates/patterns/navigation/components/includes/subnav-menu-mobile.html b/...ject_styleguide/templates/patterns/navigation/components/includes/subnav-menu-mobile.html
@@ -17,8 +17,8 @@
         {% for child in links %}
             {% if child.block_type == "link" %}
                 <li class="sub-nav-mobile__item">
-                    <a href="{{ child.value.url }}" class="sub-nav-mobile__link sub-nav-mobile__link--no-children">
-                        {{ child.value.text }}
+                    <a href="{{ child.value.url }}" class="sub-nav-mobile__link">
+                        <span class="sub-nav-mobile__link-text">{{ child.value.text }}</span>
                         {% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
                     </a>
                 </li>

diff --git a/tbx/project_styleguide/templates/patterns/navigation/components/secondary-nav-mobile.html b/tbx/project_styleguide/templates/patterns/navigation/components/secondary-nav-mobile.html
@@ -4,9 +4,11 @@
     <ul class="secondary-nav-mobile__list" data-secondary-nav>
         {% for block in page.navigation_set.navigation %}
             {% if block.block_type == "link" %}
-                <li class="secondary-nav-mobile__item">
-                    <a href="{{ block.value.url }}" class="secondary-nav-mobile__link secondary-nav-mobile__link--no-children">
-                        {{ block.value.text }}
+                <li class="secondary-nav-mobile__item secondary-nav-mobile__item--no-children">
+                    <a href="{{ block.value.url }}" class="secondary-nav-mobile__link secondary-nav-mobile__link--no-children" {% if forloop.last %}data-last-menu-item-mobile{% endif %}>
+                        <span class="secondary-nav-mobile__link-text">
+                            {{ block.value.text }}
+                        </span>
                         {% include "patterns/atoms/icons/icon.html" with name="arrow" classname="secondary-nav-mobile__icon" %}
                     </a>
                 </li>

diff --git a/tbx/project_styleguide/templates/patterns/organisms/header/header.yaml b/tbx/project_styleguide/templates/patterns/organisms/header/header.yaml
@@ -5,6 +5,12 @@ tags:
   primarynavmobile:
     '':
       template_name: 'patterns/navigation/components/primary-nav-mobile.html'
+  secondarynav:
+    '':
+      template_name: 'patterns/navigation/components/secondary-nav.html'
+  secondarynavmobile:
+    '':
+      template_name: 'patterns/navigation/components/secondary-nav-mobile.html'
   pageurl:
     link:
       raw: '#'
diff --git a/tbx/static_src/sass/components/navigation/_secondary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_secondary-nav-mobile.scss
@@ -48,23 +48,28 @@ Styles for the top level of the navigation at mobile
         border-bottom: 2px solid var(--color--light-border);
         color: var(--color--link);
 
+        &:focus {
+            @include focus-style();
+        }
+
         &--has-children {
             justify-content: space-between;
         }
+    }
 
-        &--no-children {
-            @include link-styles(
-                $color: var(--color--link),
-                $interaction-color: var(--color--theme-primary),
-                $underline-color: var(--color--link)
-            );
+    // top level menu link text for items with no children
+    &__link-text {
+        @include link-styles(
+            $color: var(--color--link),
+            $interaction-color: var(--color--theme-primary),
+            $underline-color: var(--color--link)
+        );
 
-            &:hover {
-                transition: color $transition-quick;
+        &:hover {
+            transition: color $transition-quick;
 
-                @include reduced-motion() {
-                    transition: none;
-                }
+            @include reduced-motion() {
+                transition: none;
             }
         }
     }

diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_sub-nav-mobile.scss
@@ -57,22 +57,6 @@ Styles for the lower levels of the navigation at mobile
             justify-content: space-between;
         }
 
-        &--no-children {
-            @include link-styles(
-                $color: var(--color--link),
-                $interaction-color: var(--color--theme-primary),
-                $underline-color: var(--color--link)
-            );
-
-            &:hover {
-                transition: color $transition-quick;
-
-                @include reduced-motion() {
-                    transition: none;
-                }
-            }
-        }
-
         &--parent {
             color: var(--color--heading);
             font-weight: $weight--semibold;
@@ -87,6 +71,23 @@ Styles for the lower levels of the navigation at mobile
         }
     }
 
+    // 2nd and 3rd level link text for items with no children
+    &__link-text {
+        @include link-styles(
+            $color: var(--color--link),
+            $interaction-color: var(--color--theme-primary),
+            $underline-color: var(--color--link)
+        );
+
+        &:hover {
+            transition: color $transition-quick;
+
+            @include reduced-motion() {
+                transition: none;
+            }
+        }
+    }
+
     &__icon {
         @include arrow-link-icon-styles(
             $width: 18px,