fix cta button keyboard active style

ONSdigital · Oct 26, 2023 · 3ff961c · 3ff961c
1 parent 5e004da
commit 3ff961c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -78,13 +78,15 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:focus:hover:not(:active) &__inner {
+  &:focus:hover:not(:active, .active) &__inner {
     background: var(--ons-color-focus-dark);
   }
 
   // When down
   &:active &,
-  &:active:focus & {
+  &:active:focus &,
+  &.active &,
+  &.active:focus & {
     &__inner {
       background: var(--ons-color-button);
       box-shadow: none;
@@ -96,7 +98,8 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:active {
+  &:active,
+  &.active {
     top: ems($button-shadow-size);
   }
 
@@ -132,7 +135,9 @@ $button-shadow-size: 3px;
 
   &--secondary &,
   &--secondary:active &,
-  &--secondary:active:focus & {
+  &--secondary:active:focus &,
+  &--secondary.active &,
+  &--secondary.active:focus & {
     &__inner {
       background: var(--ons-color-button-secondary);
       color: var(--ons-color-text);
@@ -238,8 +243,8 @@ $button-shadow-size: 3px;
   }
 
   &--text-link:focus &,
-  &--text-link.active:focus &,
-  &--text-link:active:focus & {
+  &--text-link:active:focus &,
+  &--text-link.active:focus & {
     &__inner {
       background-color: var(--ons-color-focus);
       box-shadow: 0 -2px var(--ons-color-focus),
@@ -282,13 +287,15 @@ $button-shadow-size: 3px;
   &--disabled,
   &--loader.ons-is-loading {
     &:active,
-    .active {
+    &.active {
       top: 0 !important; // Override 'pressed' state for flat and non-selectable buttons
     }
   }
 
   &--ghost:active:focus,
-  &--ghost-dark:active:focus {
+  &--ghost-dark:active:focus,
+  &--ghost.active:focus,
+  &--ghost-dark.active:focus {
     box-shadow: none;
     outline: 3px solid transparent;
   }
@@ -319,7 +326,8 @@ $button-shadow-size: 3px;
 
   &--ghost:active &,
   &--ghost:active:focus &,
-  &--ghost.active & {
+  &--ghost.active &,
+  &--ghost.active:focus & {
     &__inner {
       background: rgb(0 0 0 / 20%);
       border-color: rgb(255 255 255 / 60%);
@@ -333,7 +341,8 @@ $button-shadow-size: 3px;
   &--ghost-dark:hover &,
   &--ghost-dark:active &,
   &--ghost-dark:active:focus &,
-  &--ghost-dark.active & {
+  &--ghost-dark.active &,
+  &--ghost-dark.active:focus & {
     &__inner {
       background: var(--ons-color-black);
       border-color: var(--ons-color-black);
@@ -403,7 +412,8 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--loader.ons-is-loading:active & {
+  &--loader.ons-is-loading:active &,
+  &--loader.ons-is-loading.active & {
     &__inner {
       box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
     }
@@ -448,7 +458,8 @@ $button-shadow-size: 3px;
     cursor: not-allowed;
   }
 
-  &--disabled:active & {
+  &--disabled:active &,
+  &--disabled.active & {
     &__inner {
       box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
     }
@@ -496,7 +507,9 @@ $button-shadow-size: 3px;
   }
 
   &--dropdown:active &,
-  &--dropdown:active:focus & {
+  &--dropdown:active:focus &,
+  &--dropdown.active &,
+  &--dropdown.active:focus & {
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -18,7 +18,8 @@ export default class SubmitButton {
         this.button.addEventListener('click', this.timerButton.bind(this));
       }
     } else if (this.submitType == 'link') {
-      this.button.addEventListener('keydown', this.linkButton.bind(this));
+      this.button.addEventListener('keydown', this.linkButtonKeyDown.bind(this));
+      this.button.addEventListener('keyup', this.linkButtonKeyUp.bind(this));
     }
   }
 
@@ -39,7 +40,7 @@ export default class SubmitButton {
       timerButtonEl.setAttribute('disabled', true);
     }
     setTimeout(
-      timerButtonEl => {
+      (timerButtonEl) => {
         timerButtonEl.removeAttribute('disabled');
         i = 0;
       },
@@ -48,10 +49,17 @@ export default class SubmitButton {
     );
   }
 
-  linkButton(e) {
-    if (e.keyCode == 32) {
-      e.preventDefault();
+  linkButtonKeyDown(event) {
+    if (event.keyCode == 32) {
+      event.preventDefault();
       this.button.click();
     }
+    this.button.classList.add('active');
+  }
+
+  linkButtonKeyUp(event) {
+    if (event.keyCode == 32 || event.keyCode == 13) {
+      this.button.classList.remove('active');
+    }
   }
 }