Merge pull request #4522 from betagouv/accessibility_outline_links

Améliore l'accessibilité en encadrant les liens sous focus

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;
+  }
+}

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%);

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;
 }

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;

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 {