Merge pull request #286 from torchbox/fix/focus-state-inconsistencies

chris-lawton · web-flow · commit 3ac4cd31bd82 · 2024-07-25T08:57:29.000+01:00
Focus state inconsistencies
diff --git a/docs/front-end/utility-classes.md b/docs/front-end/utility-classes.md
@@ -4,6 +4,6 @@ Most CSS classes used in this build are designed to fit with a particular compon
 
 Some, such as the `listing` component are designed to be a base with variations across a number of variant components - this is made clear by the component naming: `listing--image.html`, `listing--simple.html` etc.
 
-However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting` and `.body`.
+However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting`, `.body` and `icon--listing-arrow`.
 
 The same tailwind utility classes that are avialable in `wagtail-kit` are available in this build. `tailwind.config.js` includes the custom spacing for the build, allowing us to use classes such as `mb-spacerMini` where it wouldn't be practical to create a new scss component just for a one-off spacing adjustment.
diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--avatar.html b/tbx/project_styleguide/templates/patterns/molecules/listing/listing--avatar.html
@@ -7,7 +7,7 @@
         <a class="listing-avatar__link listing__link" href="{{ link }}" aria-label="{{ aria_text|default:title }} by {{ name }}">
             <h2 class="listing-avatar__title listing__title">
                 {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing__arrow icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="listing-avatar__details listing__details">
diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--event.html b/tbx/project_styleguide/templates/patterns/molecules/listing/listing--event.html
@@ -31,7 +31,7 @@
         <a class="listing-image__link listing__link" href="{{ link }}">
             <h2 class="listing-image__title listing__title">
                 {# The title and icon need to be on the same line with no whitespace to prevent the icon being orphaned on a new line #}
-                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-image__arrow listing__arrow" %}</span>
+                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing__arrow icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="listing-event__details listing__details">
diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--image.html b/tbx/project_styleguide/templates/patterns/molecules/listing/listing--image.html
@@ -26,7 +26,7 @@
         <a class="listing-image__link listing__link" href="{{ link }}">
             <h2 class="listing-image__title listing__title">
                 {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-image__arrow listing__arrow" %}</span>
+                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing__arrow icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="listing-image__details listing__details">
diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--simple.html b/tbx/project_styleguide/templates/patterns/molecules/listing/listing--simple.html
@@ -2,7 +2,7 @@
     <a class="listing__link" href="{{ link }}" aria-label="{{ aria_text|default:title }} by {{ name }}">
         <h2 class="listing__title">
             {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-            <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+            <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing__arrow icon--listing-arrow" %}</span>
         </h2>
     </a>
     <div class="listing__details">
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/event_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/event_block.html
@@ -5,7 +5,7 @@
         <a class="event-block__title" href="{{ value.get_button_link }}" aria-label="{{ value.title }}">
             <h2>
                 {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                <span>{{ value.title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+                <span>{{ value.title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="event-block__arrow icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="event-block__meta">
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_case_study.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_case_study.html
@@ -18,7 +18,7 @@
             <a href="{% pageurl link %}" class="featured-case-study__link">
                 <h2 class="featured-case-study__title">
                     {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                    <span class="featured-case-study__link-text">{{ link.title }}</span><span class="featured-case-study__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+                    <span class="featured-case-study__link-text">{{ link.title }}</span><span class="featured-case-study__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="featured-case-study__arrow icon--listing-arrow" %}</span>
                 </h2>
             </a>
 
diff --git a/tbx/static_src/sass/components/_event-block.scss b/tbx/static_src/sass/components/_event-block.scss
@@ -1,6 +1,8 @@
 @use 'config' as *;
 
 .event-block {
+    $root: &;
+
     display: grid;
     grid-template-columns: 1fr;
     background-color: rgba($color--white, 0.04);
@@ -36,6 +38,12 @@
         @include media-query(large) {
             margin-bottom: $spacer-small;
         }
+
+        &:focus {
+            #{$root}__arrow {
+                @include arrow-focus-style();
+            }
+        }
     }
 
     &__meta {
diff --git a/tbx/static_src/sass/components/_featured-case-study.scss b/tbx/static_src/sass/components/_featured-case-study.scss
@@ -1,6 +1,8 @@
 @use 'config' as *;
 
 .featured-case-study {
+    $root: &;
+
     $gradient-z-index: 1;
     position: relative;
     margin-top: $spacer-medium;
@@ -97,6 +99,10 @@
 
         &:focus {
             @include focus-style();
+
+            #{$root}__arrow {
+                @include arrow-focus-style();
+            }
         }
     }
 
diff --git a/tbx/static_src/sass/components/_footer.scss b/tbx/static_src/sass/components/_footer.scss
@@ -81,6 +81,10 @@
         display: flex;
         align-items: center;
         height: 100%;
+
+        &:focus {
+            @include focus-style($shadow: true);
+        }
     }
 
     &__logo {
diff --git a/tbx/static_src/sass/components/_icon.scss b/tbx/static_src/sass/components/_icon.scss
@@ -24,6 +24,11 @@
         width: 100%;
     }
 
+    &--listing-arrow {
+        @include arrow-link-icon-styles();
+        margin-left: $spacer-mini-plus;
+    }
+
     .template-404-page & {
         &--broken-matchstick {
             margin: 0 auto;
diff --git a/tbx/static_src/sass/components/_listing.scss b/tbx/static_src/sass/components/_listing.scss
@@ -3,6 +3,8 @@
 @use 'config' as *;
 
 .listing {
+    $root: &;
+
     list-style-type: none;
     margin-bottom: $spacer-small;
 
@@ -16,6 +18,11 @@
 
         &:focus {
             @include focus-style();
+            padding-right: $link-transition-gap; // without this the arrows that are only on one line overlap the focus ring
+
+            #{$root}__arrow {
+                @include arrow-focus-style();
+            }
         }
 
         @include media-query(medium) {
diff --git a/tbx/static_src/sass/components/_showcase.scss b/tbx/static_src/sass/components/_showcase.scss
@@ -54,7 +54,7 @@
             &:focus,
             &:hover {
                 #{$root}__arrow {
-                    transform: translate3d($link-transition-gap, 0, 0);
+                    @include arrow-focus-style();
                 }
 
                 #{$root}__heading {
diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss
@@ -133,6 +133,15 @@
     }
 }
 
+@mixin arrow-focus-style() {
+    transform: translate3d($link-transition-gap, 0, 0);
+    color: var(--color--link-interaction);
+
+    @include reduced-motion() {
+        transform: none;
+    }
+}
+
 /* ============================================
     Link styles - set to be the same colour as the text by default
     but can be overridden by passing in a resting colour and interaction colour
