Merge pull request #4679 from consul/focus_styles

Add default focus outline to buttons

app/assets/stylesheets/admin.scss

@@ -274,6 +274,10 @@ $table-header:   #ecf1f6;
       border: $admin-border;
       border-radius: rem-calc(6);
       box-shadow: none;
+
+      &:focus {
+        border: $input-border-focus;
+      }
     }
   }
 
@@ -978,17 +982,6 @@ table {
     }
   }
 
-  .legislation-draft-version-body {
-    font-family: $font-family-serif;
-    background: #f5f5f5;
-    height: 16em;
-
-    &:focus {
-      border: 1px solid #cacaca;
-      box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
-    }
-  }
-
   .markdown-preview {
     font-family: $font-family-serif;
     border: 1px solid #cacaca;
@@ -1032,11 +1025,14 @@ table {
 
     .legislation-draft-version-body {
       border-radius: 0;
-      padding: 1rem;
-      border: 0;
 
       @include breakpoint(medium) {
-        padding: 1rem 2rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
+
+      &:focus {
+        box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
       }
     }
 
@@ -1051,12 +1047,6 @@ table {
   }
 }
 
-.legislation-draft-version-body {
-  &:focus {
-    border: 0;
-  }
-}
-
 // 09. Map
 // --------------
 

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

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

app/assets/stylesheets/advanced_search.scss

@@ -40,10 +40,6 @@
       margin-bottom: 0;
       margin-top: $line-height / 4;
     }
-
-    &:focus {
-      outline: $outline-focus;
-    }
   }
 
   .general-search,

app/assets/stylesheets/layout.scss

@@ -106,6 +106,27 @@ a {
 
   &:focus {
     color: $link-hover;
+  }
+}
+
+a,
+button,
+[type="button"],
+[type="submit"] {
+  &:focus {
+    outline: $outline-focus;
+  }
+
+  &:focus-visible {
+    outline: $outline-focus;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:active,
+  &:focus:active {
     outline: $outline-focus;
   }
 }
@@ -2401,10 +2422,6 @@ table {
     float: right;
   }
 
-  &:focus {
-    outline: $outline-focus;
-  }
-
   &[aria-expanded="false"] + form {
     display: none;
   }

app/assets/stylesheets/layout/locale_switcher.scss

@@ -39,6 +39,7 @@
       width: auto;
 
       &:focus {
+        border: 0;
         outline: $outline-focus;
       }
 

app/assets/stylesheets/mixins/buttons.scss

@@ -39,8 +39,4 @@
     color: $link-hover;
     text-decoration: underline;
   }
-
-  &:focus {
-    outline: $outline-focus;
-  }
 }

app/assets/stylesheets/participation.scss

@@ -772,10 +772,6 @@
         cursor: pointer;
       }
 
-      &:focus {
-        outline: $outline-focus;
-      }
-
       &:active {
         opacity: 0.75;
       }

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -73,10 +73,6 @@
 
   .remove-tag {
     color: $white;
-
-    &:focus {
-      outline: $outline-focus;
-    }
   }
 
   h3 {

app/views/admin/legislation/draft_versions/_form.html.erb

@@ -50,7 +50,8 @@
         </div>
 
         <div class="small-12 medium-6 column markdown-area">
-          <%= translations_form.text_area :body, label: false, rows: 10 %>
+          <%= translations_form.text_area :body, label: false, rows: 10,
+                                          class: "legislation-draft-version-body" %>
         </div>
 
         <div class="small-12 medium-6 column markdown-preview">