Merge pull request #350 from torchbox/feature/twe-27-focus-styles

TWE-27 | FE | Update focus styles
torchbox · Jan 27, 2025 · d06cba3 · d06cba3
2 parents 6aafa54 + e0350b3
commit d06cba3
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 5 deletions.
diff --git a/tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml b/tbx/project_styleguide/templates/patterns/pages/home/home_page.yaml
@@ -1,5 +1,5 @@
 context:
-  hero_introduction: '<p data-block-key="hs0yc">Innovative and strategic digital experiences, powerful tech platforms, and targeted digital marketing to catalyse impact for the world&apos;s leading <a href="/services/charity/"><span class="text-coral">charities</span></a> and <a href="/services/public-sector/"><span class="text-nebuline">public sector</span></a> organisations.</p>'
+  hero_introduction: '<p data-block-key="hs0yc">Innovative and strategic digital experiences, powerful tech platforms, and targeted digital marketing to catalyse impact for the world&apos;s leading <a href="/services/charity/" class="text-coral">charities</a> and <a href="/services/public-sector/" class="text-nebuline">public sector</a> organisations.</p>'
   page:
     get_verbose_name: home-page
     partner_logos:

diff --git a/tbx/static_src/sass/components/_button-link.scss b/tbx/static_src/sass/components/_button-link.scss
@@ -26,6 +26,7 @@
         transition: none;
     }
 
+    &:focus,
     &:hover {
         color: var(--color--button-link-interaction);
         background-color: var(--color--link-interaction);
@@ -37,14 +38,26 @@
 
     &--theme-coral {
         background-color: $color--coral;
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--coral));
+        }
     }
 
     &--theme-nebuline {
         background-color: $color--nebuline;
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--nebuline));
+        }
     }
 
     &--theme-lagoon {
         background-color: $color--lagoon;
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--lagoon));
+        }
     }
 
     &__arrow {

diff --git a/tbx/static_src/sass/components/_call-to-action.scss b/tbx/static_src/sass/components/_call-to-action.scss
@@ -29,5 +29,9 @@
         @include media-query(large) {
             margin-top: 0;
         }
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--background));
+        }
     }
 }
diff --git a/tbx/static_src/sass/components/_contact-cta.scss b/tbx/static_src/sass/components/_contact-cta.scss
@@ -54,5 +54,9 @@
             margin-left: auto;
             margin-right: $spacer-medium;
         }
+
+        &:focus {
+            @include focus-style($outline-color: var(--color--background));
+        }
     }
 }
diff --git a/tbx/static_src/sass/components/_home-page-intro.scss b/tbx/static_src/sass/components/_home-page-intro.scss
@@ -12,6 +12,10 @@
             $underline-hover-color: var(--color--heading)
         );
         font-weight: $weight--semibold;
+
+        &:focus {
+            @include focus-style();
+        }
     }
 
     .text-coral {
@@ -23,6 +27,13 @@
                 $underline-hover-color: var(--color--coral)
             );
         }
+
+        &:focus {
+            @include focus-style(
+                $color: var(--color--coral),
+                $outline-color: var(--color--coral)
+            );
+        }
     }
 
     .text-nebuline {
@@ -34,5 +45,12 @@
                 $underline-hover-color: var(--color--nebuline)
             );
         }
+
+        &:focus {
+            @include focus-style(
+                $color: var(--color--nebuline),
+                $outline-color: var(--color--nebuline)
+            );
+        }
     }
 }
diff --git a/tbx/static_src/sass/components/_tabs.scss b/tbx/static_src/sass/components/_tabs.scss
@@ -29,7 +29,9 @@
         margin-bottom: $spacer-small;
 
         &:focus {
-            outline: $focus-width solid var(--color--theme-primary-muted);
+            @include focus-style(
+                $outline-color: var(--color--theme-primary-muted)
+            );
         }
 
         &--active {

diff --git a/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss b/tbx/static_src/sass/components/navigation/_primary-nav-mobile.scss
@@ -48,7 +48,8 @@ Styles for the primary navigation at mobile (top level)
         );
         @include high-contrast-text-decoration();
         display: flex;
-        padding: 10px $spacer-small;
+        margin: 10px $spacer-small;
+        width: fit-content;
 
         &:focus {
             @include focus-style();

diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss
@@ -123,9 +123,10 @@
     $color: var(--color--link),
     $shadow: false,
     $underline-hover-color: $color,
-    $keyboard-only: false
+    $keyboard-only: false,
+    $outline-color: var(--color--theme-primary)
 ) {
-    outline: $focus-width solid var(--color--theme-primary);
+    outline: $focus-width solid $outline-color;
     text-decoration-thickness: $link-underline-thickness-interaction;
     text-decoration-color: $underline-hover-color;