Added missing underline to focused button elements

nationalarchives · Sep 5, 2024 · 5766c69 · 5766c69
1 parent 7daeb8f
commit 5766c69
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 ### Fixed
 
+- Added missing underline to focused buttons using on the `<button>` element
+
 ### Security
 
 ## [0.2.12](https://github.com/nationalarchives/tna-frontend/compare/v0.2.11...v0.2.12) - 2024-09-05

diff --git a/src/nationalarchives/components/button/button-group.stories.js b/src/nationalarchives/components/button/button-group.stories.js
@@ -102,6 +102,12 @@ Group.args = {
       buttonElement: true,
       classes: "tna-button--demo",
     },
+    {
+      text: "Plain button",
+      plain: true,
+      buttonElement: true,
+      classes: "tna-button--demo",
+    },
   ],
 };
 

diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
@@ -38,7 +38,8 @@ $button-border-width: 4px !default;
     @include colour.colour-font("button-text");
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     @include colour.colour-font("button-hover-text");
     text-decoration: none;
 
@@ -74,7 +75,8 @@ $button-border-width: 4px !default;
       @include colour.colour-font("link");
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       @include typography.interacted-text-decoration;
     }
   }
@@ -90,7 +92,8 @@ $button-border-width: 4px !default;
       @include colour.colour-font("button-accented-text");
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       @include colour.colour-font("font-dark");
     }
   }
@@ -175,47 +178,41 @@ $button-border-width: 4px !default;
 
   .tna-background-accent &,
   .tna-template--dark-theme .tna-background-accent-light & {
-    &:hover {
+    &:hover,
+    &:focus {
       @include colour.colour-font("font-dark");
     }
   }
 
   .tna-background-accent &--accent,
   .tna-template--dark-theme .tna-background-accent-light &--accent {
-    // @include colour.contrast;
-
-    // @include colour.colour-background("button-background");
     @include colour.colour-background("contrast-button-background");
 
-    // @include colour.colour-border("button-background");
     @include colour.colour-border("contrast-button-background");
 
     &,
     &:link,
     &:visited {
-      // @include colour.colour-font("button-text");
       @include colour.colour-font("contrast-button-text");
     }
 
-    &:hover {
-      // @include colour.colour-font("font-dark");
+    &:hover,
+    &:focus {
       @include colour.colour-font("contrast-font-dark");
 
-      // @include colour.colour-background("background");
       @include colour.colour-background("contrast-background");
     }
   }
 
   @media (prefers-color-scheme: dark) {
     .tna-template--system-theme .tna-background-accent-light & {
-      &:hover {
+      &:hover,
+      &:focus {
         @include colour.colour-font("font-dark");
       }
     }
 
     .tna-template--system-theme .tna-background-accent-light &--accent {
-      // @include colour.contrast;
-
       @include colour.colour-background("contrast-button-background");
 
       @include colour.colour-border("contrast-button-background");
@@ -226,7 +223,8 @@ $button-border-width: 4px !default;
         @include colour.colour-font("contrast-button-text");
       }
 
-      &:hover {
+      &:hover,
+      &:focus {
         @include colour.colour-font("contrast-font-dark");
 
         @include colour.colour-background("contrast-background");
@@ -235,7 +233,8 @@ $button-border-width: 4px !default;
   }
 
   @include colour.on-forced-colours {
-    &:hover {
+    &:hover,
+    &:focus {
       @include typography.interacted-text-decoration;
     }
   }