From 9ae713c08380e2ed49fbab337fc98e3f76f2839e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zoe=CC=88=20Bijl?= <code@moiety.me>
Date: Sun, 5 Oct 2025 11:22:41 +0200
Subject: [PATCH] [bugfix] make focus visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mastodon’s UI has been plagued with inaccessibility from the start. Removing the focus outline is one example of that. This is the start of fixing that. Removes all instances of `outline: 0 | none;`.

Next step is to add nicely styled focus outlines.
---
 .../flavours/glitch/styles/_mixins.scss       |  1 -
 .../flavours/glitch/styles/basics.scss        |  6 ----
 .../glitch/styles/components/accounts.scss    |  1 -
 .../glitch/styles/components/columns.scss     | 24 --------------
 .../styles/components/compose_form.scss       | 10 ------
 .../glitch/styles/components/drawer.scss      |  1 -
 .../glitch/styles/components/emoji.scss       |  6 ----
 .../styles/components/emoji_picker.scss       | 10 ------
 .../styles/components/local_settings.scss     |  1 -
 .../glitch/styles/components/media.scss       |  6 ----
 .../glitch/styles/components/misc.scss        | 32 ++-----------------
 .../glitch/styles/components/modal.scss       | 23 -------------
 .../glitch/styles/components/search.scss      | 20 ------------
 .../glitch/styles/components/status.scss      |  5 ---
 .../flavours/glitch/styles/containers.scss    |  1 -
 .../flavours/glitch/styles/forms.scss         | 14 --------
 .../flavours/glitch/styles/polls.scss         | 12 -------
 17 files changed, 2 insertions(+), 171 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/_mixins.scss b/app/javascript/flavours/glitch/styles/_mixins.scss
index 6643cd1aa..bebfa6021 100644
--- a/app/javascript/flavours/glitch/styles/_mixins.scss
+++ b/app/javascript/flavours/glitch/styles/_mixins.scss
@@ -52,7 +52,6 @@
 }
 
 @mixin search-input() {
-  outline: 0;
   box-sizing: border-box;
   width: 100%;
   border: 0;
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index ff00c797c..d41eb9d0b 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -164,10 +164,6 @@ body {
 button {
   font-family: inherit;
   cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
 }
 
 .app-holder {
@@ -178,7 +174,6 @@ button {
     width: 100%;
     align-items: center;
     justify-content: center;
-    outline: 0 !important;
   }
 
   & > noscript {
@@ -250,7 +245,6 @@ button {
     margin: 0;
     line-height: inherit;
     cursor: pointer;
-    outline: 0;
     transition: color 300ms linear;
     text-decoration: underline;
 
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index e68c6cac0..4379fbdcd 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -753,7 +753,6 @@
       font-size: 14px;
       resize: none;
       border: 0;
-      outline: 0;
       border-radius: 4px;
 
       &::placeholder {
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 126c68c41..149494819 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -260,10 +260,6 @@ $ui-header-height: 55px;
     background: lighten($ui-base-color, 11%);
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &--transparent {
     background: transparent;
     color: $ui-secondary-color;
@@ -350,7 +346,6 @@ $ui-header-height: 55px;
   cursor: pointer;
   position: relative;
   z-index: 2;
-  outline: 0;
   overflow: hidden;
 
   & > button {
@@ -377,11 +372,6 @@ $ui-header-height: 55px;
       text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
     }
   }
-
-  &:focus,
-  &:active {
-    outline: 0;
-  }
 }
 
 .column {
@@ -743,10 +733,6 @@ $ui-header-height: 55px;
     input {
       width: 100%;
       margin-bottom: 6px;
-
-      &:focus {
-        outline: 0;
-      }
     }
   }
 
@@ -786,16 +772,6 @@ $ui-header-height: 55px;
         color: lighten($darker-text-color, 4%);
       }
 
-      &::-moz-focus-inner {
-        border: 0;
-      }
-
-      &::-moz-focus-inner,
-      &:focus,
-      &:active {
-        outline: 0 !important;
-      }
-
       &:focus {
         background: lighten($ui-base-color, 4%);
       }
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 3b85dfbf1..ea7ac8e1a 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -50,7 +50,6 @@
     border-radius: 4px;
     padding: 10px;
     width: 100%;
-    outline: 0;
     color: $inverted-text-color;
     background: $simple-background-color;
     font-size: 14px;
@@ -61,9 +60,6 @@
       color: $dark-text-color;
     }
 
-    &:focus {
-      outline: 0;
-    }
     @include single-column('screen and (max-width: 630px)') {
       font-size: 16px;
     }
@@ -220,7 +216,6 @@
       padding: 10px 32px 0 10px;
       width: 100%;
       min-height: 100px;
-      outline: 0;
       color: $inverted-text-color;
       background: $simple-background-color;
       font-size: 14px;
@@ -236,10 +231,6 @@
         all: unset;
       }
 
-      &:focus {
-        outline: 0;
-      }
-
       @include single-column('screen and (max-width: 630px)') {
         font-size: 16px;
       }
@@ -670,7 +661,6 @@
         &.active {
           background: $ui-highlight-color;
           color: $primary-text-color;
-          outline: 0;
 
           .language-dropdown__dropdown__results__item__common-name {
             color: $secondary-text-color;
diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index c1e207535..2819c18ff 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -77,7 +77,6 @@
 
     &:focus,
     &:hover {
-      outline: none;
       background: lighten($ui-base-color, 3%);
       transition: background 200ms ease-out;
     }
diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss
index f76288978..22947a700 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji.scss
@@ -76,14 +76,8 @@
   padding-bottom: 2px;
   padding-inline-start: 2px;
   padding-inline-end: 5px;
-  outline: 0;
   cursor: pointer;
 
-  &:active,
-  &:focus {
-    outline: 0 !important;
-  }
-
   img {
     filter: grayscale(100%);
     opacity: 0.8;
diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
index e402838db..98999aec8 100644
--- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss
@@ -123,16 +123,6 @@
     border: 1px solid $ui-secondary-color;
     border-radius: 4px;
 
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    &::-moz-focus-inner,
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-
     &::-webkit-search-cancel-button {
       display: none;
     }
diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.scss
index 784b06b00..077bee86a 100644
--- a/app/javascript/flavours/glitch/styles/components/local_settings.scss
+++ b/app/javascript/flavours/glitch/styles/components/local_settings.scss
@@ -60,7 +60,6 @@
   border-bottom: 1px $ui-secondary-color solid;
   cursor: pointer;
   text-decoration: none;
-  outline: none;
   transition: background 0.3s;
   box-sizing: border-box;
   width: 100%;
diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss
index 535af9d0f..72eb5ad49 100644
--- a/app/javascript/flavours/glitch/styles/components/media.scss
+++ b/app/javascript/flavours/glitch/styles/components/media.scss
@@ -454,10 +454,6 @@
     height: 100% !important;
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   .detailed-status & {
     width: 100%;
     height: 100%;
@@ -483,7 +479,6 @@
       max-height: 100% !important;
       width: 100% !important;
       height: 100% !important;
-      outline: 0;
     }
   }
 
@@ -590,7 +585,6 @@
 
     .player-button {
       display: inline-block;
-      outline: 0;
       flex: 0 0 auto;
       background: transparent;
       padding: 5px;
diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss
index 526209617..cfdffda8a 100644
--- a/app/javascript/flavours/glitch/styles/components/misc.scss
+++ b/app/javascript/flavours/glitch/styles/components/misc.scss
@@ -198,16 +198,6 @@
     transition: none;
   }
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
   &.inverted {
     color: $lighter-text-color;
 
@@ -282,7 +272,6 @@
   cursor: pointer;
   padding: 0 3px;
   white-space: nowrap;
-  outline: 0;
   transition: all 100ms ease-in;
   transition-property: background-color, color;
 
@@ -308,16 +297,6 @@
   &.active {
     color: $highlight-text-color;
   }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
 }
 
 body > [data-popper-placement] {
@@ -623,7 +602,6 @@ body > [data-popper-placement] {
     &:hover,
     &:active {
       background: var(--dropdown-border-color);
-      outline: 0;
     }
   }
 }
@@ -1038,7 +1016,6 @@ body > [data-popper-placement] {
   background: transparent;
   border: 0;
   border-bottom: 2px solid $ui-primary-color;
-  outline: 0;
   box-sizing: border-box;
   display: block;
   font-family: inherit;
@@ -1195,12 +1172,8 @@ button.icon-button.active i.fa-retweet {
     align-items: center;
   }
 
-  &:focus {
-    outline: 0 !important;
-
-    .ckbox {
-      box-shadow: 0 0 1px 1px $ui-highlight-color;
-    }
+  &:focus.ckbox {
+    box-shadow: 0 0 1px 1px $ui-highlight-color;
   }
 }
 
@@ -1523,7 +1496,6 @@ button.icon-button.active i.fa-retweet {
 
   &:focus {
     background: lighten($ui-base-color, 2%);
-    outline: 0;
   }
 
   &__avatar {
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index d0db308a1..0bdc0a884 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -693,17 +693,12 @@
     line-height: 22px;
     resize: vertical;
     border: 0;
-    outline: 0;
     border-radius: 4px;
     margin: 20px 0;
 
     &::placeholder {
       color: $dark-text-color;
     }
-
-    &:focus {
-      outline: 0;
-    }
   }
 
   &__toggle {
@@ -821,7 +816,6 @@
     font-family: inherit;
     font-size: 14px;
     resize: none;
-    outline: 0;
     border-radius: 4px;
     border: 1px solid $ui-secondary-color;
     min-height: 100px;
@@ -1019,7 +1013,6 @@
     color: $inverted-text-color;
     display: inline-block;
     width: auto;
-    outline: 0;
     font-family: inherit;
     background: $simple-background-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
@@ -1128,7 +1121,6 @@
     }
 
     .embed-modal__html {
-      outline: 0;
       box-sizing: border-box;
       display: block;
       width: 100%;
@@ -1142,16 +1134,6 @@
       margin-bottom: 15px;
       border-radius: 4px;
 
-      &::-moz-focus-inner {
-        border: 0;
-      }
-
-      &::-moz-focus-inner,
-      &:focus,
-      &:active {
-        outline: 0 !important;
-      }
-
       &:focus {
         background: lighten($ui-base-color, 4%);
       }
@@ -1377,10 +1359,6 @@ img.modal-warning {
         &::placeholder {
           color: lighten($darker-text-color, 4%);
         }
-
-        &:focus {
-          outline: 0;
-        }
       }
 
       .button {
@@ -1477,7 +1455,6 @@ img.modal-warning {
     overflow: hidden;
 
     &:focus {
-      outline: 0;
       background: darken($ui-base-color, 4%);
     }
   }
diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.scss
index aa54fc26d..bd5b83db9 100644
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@@ -107,37 +107,17 @@
     color: lighten($darker-text-color, 4%);
   }
 
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
   &:focus {
     background: lighten($ui-base-color, 4%);
   }
 }
 
 .search__icon {
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus {
-    outline: 0 !important;
-  }
-
   .fa {
     position: absolute;
     top: 16px;
     inset-inline-end: 10px;
     display: inline-block;
-    opacity: 0;
     transition: all 100ms linear;
     transition-property: color, transform, opacity;
     font-size: 18px;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index e25636780..272470d41 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -57,10 +57,6 @@
   padding-top: 5px;
   clear: both;
 
-  &:focus {
-    outline: 0;
-  }
-
   .emojione {
     width: 20px;
     height: 20px;
@@ -213,7 +209,6 @@
 
 .focusable {
   &:focus {
-    outline: 0;
     background: lighten($ui-base-color, 4%);
 
     &.status.status-direct {
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 4d3d4c546..a970dba97 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -27,7 +27,6 @@
       align-items: center;
       color: $primary-text-color;
       text-decoration: none;
-      outline: 0;
       padding: 12px 16px;
       line-height: 32px;
       font-weight: 500;
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index b8fc4a653..f7e53012b 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -432,7 +432,6 @@ code {
     color: $primary-text-color;
     display: block;
     width: 100%;
-    outline: 0;
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%);
@@ -535,7 +534,6 @@ code {
     box-sizing: border-box;
     cursor: pointer;
     font-weight: 500;
-    outline: 0;
     margin-bottom: 10px;
     margin-inline-end: 10px;
 
@@ -581,7 +579,6 @@ code {
     color: $primary-text-color;
     display: block;
     width: 100%;
-    outline: 0;
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%)
@@ -702,7 +699,6 @@ code {
   }
 
   .oauth-code {
-    outline: 0;
     box-sizing: border-box;
     display: block;
     width: 100%;
@@ -714,16 +710,6 @@ code {
     font-size: 14px;
     margin: 0;
 
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    &::-moz-focus-inner,
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-
     &:focus {
       background: lighten($ui-base-color, 4%);
     }
diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss
index 4566a013a..53f7222e2 100644
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@@ -85,7 +85,6 @@
       width: 100%;
       font-size: 14px;
       color: $inverted-text-color;
-      outline: 0;
       font-family: inherit;
       background: $simple-background-color;
       border: 1px solid darken($simple-background-color, 14%);
@@ -139,16 +138,6 @@
       border-color: $valid-value-color;
     }
 
-    &::-moz-focus-inner {
-      outline: 0 !important;
-      border: 0;
-    }
-
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-
     &.disabled {
       border-color: $dark-text-color;
 
@@ -285,7 +274,6 @@
     color: $inverted-text-color;
     display: inline-block;
     width: auto;
-    outline: 0;
     font-family: inherit;
     background: $simple-background-color
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")