From 35a45837ff184f0d1e156e808f7ea0a7941e5090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 1 Aug 2021 23:22:10 +0200
Subject: [PATCH] Add default focus outline to buttons

We were using a focus outline on links, but weren't doing the same for
buttons. Since sometimes browsers use a default outline which is barely
visible, this was very disorienting when browsing using the keyboard; we
were navigating through links that clearly indicated where the keyboard
focus was, and when reaching a button suddenly we had this almost
imperceptible feedback. Even if I'm used to it, my first reaction is
always "where did the focus go?" until I realize it's now on a button.

This is even more confusing because we've got buttons looking like links
and links looking like buttons.

Note that in the rules for the `:focus` styles we're including buttons
and the `[type="button"]` attribute. This seems redundant since those
styles are already covered by the `button` selector. However, Foundation
adds styles to buttons with the `[type]` attribute. Since the attribute
selector has precedence over the tag selector, we need to use the
attribute selector as well in order to override Foundation's styles.
---
 .../stylesheets/admin/machine_learning/scripts.scss  |  4 ----
 .../stylesheets/admin/machine_learning/setting.scss  |  4 ----
 app/assets/stylesheets/advanced_search.scss          |  4 ----
 app/assets/stylesheets/layout.scss                   | 12 ++++++++----
 app/assets/stylesheets/mixins/buttons.scss           |  4 ----
 app/assets/stylesheets/participation.scss            |  4 ----
 .../stylesheets/sdg/related_list_selector.scss       |  4 ----
 7 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/admin/machine_learning/scripts.scss b/app/assets/stylesheets/admin/machine_learning/scripts.scss
index ad9e738bc..6a516fd4e 100644
--- a/app/assets/stylesheets/admin/machine_learning/scripts.scss
+++ b/app/assets/stylesheets/admin/machine_learning/scripts.scss
@@ -49,10 +49,6 @@
     margin-bottom: 0;
     margin-top: $line-height;
 
-    &:focus {
-      outline: $outline-focus;
-    }
-
     &.cancel {
       @include hollow-button($alert-color);
     }
diff --git a/app/assets/stylesheets/admin/machine_learning/setting.scss b/app/assets/stylesheets/admin/machine_learning/setting.scss
index d81b96210..f9afcc079 100644
--- a/app/assets/stylesheets/admin/machine_learning/setting.scss
+++ b/app/assets/stylesheets/admin/machine_learning/setting.scss
@@ -16,10 +16,6 @@
     min-width: rem-calc(100);
     position: relative;
 
-    &:focus {
-      outline: $outline-focus;
-    }
-
     &::after {
       background: $white;
       border-radius: 100%;
diff --git a/app/assets/stylesheets/advanced_search.scss b/app/assets/stylesheets/advanced_search.scss
index 53ab36565..a22625b20 100644
--- a/app/assets/stylesheets/advanced_search.scss
+++ b/app/assets/stylesheets/advanced_search.scss
@@ -40,10 +40,6 @@
       margin-bottom: 0;
       margin-top: $line-height / 4;
     }
-
-    &:focus {
-      outline: $outline-focus;
-    }
   }
 
   .general-search,
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 4ebefa35b..7f8727814 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -106,6 +106,14 @@ a {
 
   &:focus {
     color: $link-hover;
+  }
+}
+
+a,
+button,
+[type="button"],
+[type="submit"] {
+  &:focus {
     outline: $outline-focus;
   }
 }
@@ -2401,10 +2409,6 @@ table {
     float: right;
   }
 
-  &:focus {
-    outline: $outline-focus;
-  }
-
   &[aria-expanded="false"] + form {
     display: none;
   }
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index e76835bd8..ff69c30e8 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -39,8 +39,4 @@
     color: $link-hover;
     text-decoration: underline;
   }
-
-  &:focus {
-    outline: $outline-focus;
-  }
 }
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index e36986a15..f60dd05fb 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -772,10 +772,6 @@
         cursor: pointer;
       }
 
-      &:focus {
-        outline: $outline-focus;
-      }
-
       &:active {
         opacity: 0.75;
       }
diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss
index cf97da3f7..15632a19c 100644
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -73,10 +73,6 @@
 
   .remove-tag {
     color: $white;
-
-    &:focus {
-      outline: $outline-focus;
-    }
   }
 
   h3 {