[WDTK] Improved accessibility for buttons

mysociety · Oct 8, 2024 · 2061159 · 2061159
1 parent 1110ca4
commit 2061159
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 25 deletions.
diff --git a/app/assets/stylesheets/responsive/_mixins.scss b/app/assets/stylesheets/responsive/_mixins.scss
@@ -16,8 +16,8 @@
 
     outline: 3px solid $color_off_white; // Most of the time this won't be visible, but it will be helpful when the button is in a dark background.
     outline-offset: 0;
-    box-shadow:  inset 0px 0px 0px 2px $color_black;
-  }
+    box-shadow:  inset 0px 0px 0px 2px $color_black !important; // It overrides any specificity like the Pro buttons
+  } 
 }
 
 @mixin button-base {
@@ -26,15 +26,17 @@
   display: inline-block;
   font-weight: 600;
   text-decoration: none;
-  transition: background 300ms ease-out;
+  -webkit-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
+  -moz-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
+  -o-transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
+  transition: background 300ms ease-out, color 300ms ease-out, border 300ms ease-out;
   line-height: normal;
   margin-bottom: 0;
   font-family: $font-family;
   &:hover,
   &:active,
   &:focus {
       text-decoration: none;
-      transition: background 300ms ease-out;
   }
 
   @include focus-state;
@@ -48,13 +50,13 @@
   @include button-base;
   color: $color_white;
   background: $button-bg;
-  border: none;
+  border: 1.5px solid $button-bg;
   &:hover,
   &:active,
   &:visited:hover,
   &:visited:active {
-    background: darken($button-bg, 10%);
-    color: $color_white;
+    background:lighten($button-bg, 50%);
+    color: $button-bg;
   }
 }
 
@@ -64,23 +66,29 @@
   background: mix($color_light_grey, $color_yellow, 95%);
   color: $color_black;
   font-weight: normal;
+  border: 1.5px solid lighten($color_black, 10%);
   &:hover,
   &:active {
-    background: darken($color_light_grey, 7.5%);
-    color: $color_black;
+    background: $color_black;
+    color: $color_white;
+    border: 1.5px solid $color_white;
   }
 }
 
 @mixin button-tertiary {
   @include button-base;
-  background: transparent;
-  color: $color_black;
+  background: $color_off_white; // Adding a colour instead of transparent, that way we can use this button even in dark backgrounds
+  color: $link-color;
   font-weight: normal;
-  border: 1px solid $color_light_grey;
+  border: 1.5px solid $link-color;
   &:hover,
-  &:active {
-    background: darken($color_light_grey, 7.5%);
-    border: 1px solid darken($color_light_grey, 12.5%);
+  &:active,
+  &:visited:hover,
+  &:visited:active {
+    color: $color_white;
+    // We are darkening the background and border for cases there is a defaul button and a tertiary button together. In this case when we are hovering over the tertiary one it won't look just like the default button nect to it.
+    background: darken($link-color, 15%);
+    border: 1.5px solid darken($link-color, 15%);
   }
 }
 
@@ -95,14 +103,38 @@
 
 @mixin button-pro {
   background: linear-gradient(-180deg, #4C858D 0%, #3E6D75 100%);
+  border: 1.5px solid #3E6D75;
+  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
+  &:hover,
+  &:active,
+  &:visited:hover,
+  &:visited:active {
+    box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
+    color: #3E6D75;
+    background: linear-gradient(-180deg, #d8edf0 0%, #bfe0e6 100%);
+  }
+
+  &:disabled {
+    @include button-disabled;
+  }
+}
+
+@mixin button-pro-tertiary {
+  background: $color-white;
+  color: #3E6D75;
+  border: 1.5px solid #3E6D75;
   box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.22);
   &:hover,
   &:active,
   &:visited:hover,
   &:visited:active {
+    background: linear-gradient(-180deg, #1a4146 0%, #153a40 100%);
+    color: $color-white;
     box-shadow: 0 1px 0 0 rgba(0,0,0,0.22);
   }
 
+  @include focus-state;
+
   &:disabled {
     @include button-disabled;
   }

diff --git a/app/assets/stylesheets/responsive/_mysoc_footer.scss b/app/assets/stylesheets/responsive/_mysoc_footer.scss
@@ -55,6 +55,11 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
 
   a {
     color: $mysoc-footer-link-text-color;
+    // Included in the link so it also affects a.mysoc-footer__donate__button
+    -webkit-transition: background 300ms ease-out, color 300ms ease-out;
+    -moz-transition: background 300ms ease-out, color 300ms ease-out;
+    -o-transition: background 300ms ease-out, color 300ms ease-out;
+    transition: background 300ms ease-out, color 300ms ease-out;
 
     &:hover,
     &:focus {
@@ -126,19 +131,22 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
   }
 }
 
-.mysoc-footer__donate__button {
+a.mysoc-footer__donate__button {
   display: inline-block;
   background-color: $mysoc-footer-donate-button-background-color;
-  color: $mysoc-footer-donate-button-text-color !important;
+  color: $mysoc-footer-donate-button-text-color;
   padding: 0.5em 1em;
   border-radius: 0.3em;
   font-weight: bold;
   text-decoration: none;
 
-  &:hover{
+  &:hover,
+  &:active,
+  &:visited:hover,
+  &:visited:active {
     text-decoration: none;
-    background-color: $mysoc-footer-donate-button-hover-background-color;
-    color: $mysoc-footer-donate-button-hover-text-color !important;
+    background:$mysoc-footer-donate-button-hover-background-color;
+    color: $mysoc-footer-donate-button-hover-text-color;
   }
 
   @include focus-state;

diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
@@ -203,6 +203,9 @@ a.button-secondary,
 
 .button-tertiary {
   @include button-tertiary;
+  .alaveteli-pro & {
+    @include button-pro-tertiary;
+  }
 }
 
 .button-disabled {
@@ -795,7 +798,9 @@ $mysoc-footer-link-hover-text-color: lighten($button-bg, 20%); // tweak color to
 $mysoc-footer-divider-color: #4C4C4C;
 $mysoc-footer-donate-background-color: #434343;
 $mysoc-footer-donate-text-color: #fff;
+$mysoc-footer-donate-button-hover-text-color: $button-bg;
 $mysoc-footer-donate-button-background-color: $button-bg;
+$mysoc-footer-donate-button-hover-background-color: lighten($mysoc-footer-donate-button-background-color, 50%);
 $mysoc-footer-legal-text-color: $mysoc-footer-text-color;
 $mysoc-footer-image-path: '/assets/mysoc-footer/';
 $mysoc-footer-breakpoint-sm: 42em;
@@ -1329,17 +1334,16 @@ p.locale-list-trigger {
   }
 
   a.button {
-    background-color: $color_yellow;
+    background: $color_yellow;
     border-color: darken($color_yellow, 15%);
     color: $color_black;
-    transition: color 300ms ease-out;
     &:hover,
     &:active,
-    &:focus {
+    &:visited:hover,
+    &:visited:active {
       color: $color_white;
-      background-color: $color_blue;
+      background: $color_blue;
       border-color: darken($color_blue, 15%);
-      transition: color 300ms ease-out;
     }
   }
 }