From efd35a3de79144bea82301b3ea4836b88aced9db Mon Sep 17 00:00:00 2001
From: simon lehericey <mail@simon.lehericey.net>
Date: Thu, 14 Nov 2019 09:22:02 +0100
Subject: [PATCH] Accessibility: outline links to ease keyboard navigation

---
 app/assets/stylesheets/new_design/_placeholders.scss | 8 ++++++++
 app/assets/stylesheets/new_design/buttons.scss       | 8 +++-----
 app/assets/stylesheets/new_design/custom_reset.scss  | 5 +++++
 app/assets/stylesheets/new_design/forms.scss         | 3 +++
 app/assets/stylesheets/new_design/landing.scss       | 5 +++++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/new_design/_placeholders.scss b/app/assets/stylesheets/new_design/_placeholders.scss
index 53e98918e..2dc8cbaad 100644
--- a/app/assets/stylesheets/new_design/_placeholders.scss
+++ b/app/assets/stylesheets/new_design/_placeholders.scss
@@ -1,3 +1,4 @@
+@import "colors";
 @import "constants";
 
 %horizontal-list {
@@ -17,3 +18,10 @@
   animation-fill-mode: forwards;
   animation-duration: 0.3s;
 }
+
+%outline {
+  &:active,
+  &:focus {
+    outline: 3px solid $blue;
+  }
+}
diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss
index a36b7a719..e66e2c9fa 100644
--- a/app/assets/stylesheets/new_design/buttons.scss
+++ b/app/assets/stylesheets/new_design/buttons.scss
@@ -1,7 +1,10 @@
 @import "colors";
 @import "constants";
+@import "placeholders";
 
 .button {
+  @extend %outline;
+
   display: inline-block;
   padding: 8px 16px;
   border-radius: 30px;
@@ -20,11 +23,6 @@
     text-decoration: none;
   }
 
-  &:active,
-  &:focus {
-    outline: none;
-  }
-
   &:disabled {
     opacity: 0.5;
     filter: saturate(50%);
diff --git a/app/assets/stylesheets/new_design/custom_reset.scss b/app/assets/stylesheets/new_design/custom_reset.scss
index 054f1c141..f1825a12e 100644
--- a/app/assets/stylesheets/new_design/custom_reset.scss
+++ b/app/assets/stylesheets/new_design/custom_reset.scss
@@ -1,3 +1,6 @@
+@import "colors";
+@import "placeholders";
+
 html,
 body {
   height: 100%;
@@ -14,5 +17,7 @@ html {
 }
 
 a {
+  @extend %outline;
+
   text-decoration: none;
 }
diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index f12f5681a..8136b53e9 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -1,5 +1,6 @@
 @import "constants";
 @import "colors";
+@import "placeholders";
 
 .form {
   h1 {
@@ -177,6 +178,8 @@
 
   input[type=checkbox],
   input[type=radio] {
+    @extend %outline;
+
     margin-left: 5px;
     margin-right: 4px;
     margin-bottom: 2 * $default-padding;
diff --git a/app/assets/stylesheets/new_design/landing.scss b/app/assets/stylesheets/new_design/landing.scss
index f6bec1754..1b18fea58 100644
--- a/app/assets/stylesheets/new_design/landing.scss
+++ b/app/assets/stylesheets/new_design/landing.scss
@@ -365,6 +365,11 @@ $cta-panel-button-border-size: 2px;
     color: #FFFFFF;
     text-decoration: none;
   }
+
+  &:active,
+  &:focus {
+    outline: 3px solid #FFFFFF;
+  }
 }
 
 .cta-panel-button-blue {