Dome/Masto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[bugfix] make focus visible

Browse Source 
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.
This commit is contained in:
Zoë Bijl
2025-10-05 11:22:41 +02:00
parent 4b4a9f981f
commit 9ae713c083
17 changed files with 2 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/flavours/glitch/styles/_mixins.scss
-1
View File
@@ -52,7 +52,6 @@
}
@mixin search-input() {
outline: 0;
box-sizing: border-box;
width: 100%;
border: 0;
app/javascript/flavours/glitch/styles/basics.scss
-6
View File
@@ -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;
app/javascript/flavours/glitch/styles/components/accounts.scss
-1
View File
@@ -753,7 +753,6 @@
font-size: 14px;
resize: none;
border: 0;
outline: 0;
border-radius: 4px;
&::placeholder {
app/javascript/flavours/glitch/styles/components/columns.scss
-24
View File
@@ -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%);
}
app/javascript/flavours/glitch/styles/components/compose_form.scss
-10
View File
@@ -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;
app/javascript/flavours/glitch/styles/components/drawer.scss
-1
View File
@@ -77,7 +77,6 @@
&:focus,
&:hover {
outline: none;
background: lighten($ui-base-color, 3%);
transition: background 200ms ease-out;
}
app/javascript/flavours/glitch/styles/components/emoji.scss
-6
View File
@@ -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;
app/javascript/flavours/glitch/styles/components/emoji_picker.scss
-10
View File
@@ -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;
}
app/javascript/flavours/glitch/styles/components/local_settings.scss
-1
View File
@@ -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%;
app/javascript/flavours/glitch/styles/components/media.scss
-6
View File
@@ -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;
app/javascript/flavours/glitch/styles/components/misc.scss
+2 -30
View File
@@ -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 {
app/javascript/flavours/glitch/styles/components/modal.scss
-23
View File
@@ -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%);
}
}
app/javascript/flavours/glitch/styles/components/search.scss
-20
View File
@@ -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;
app/javascript/flavours/glitch/styles/components/status.scss
-5
View File
@@ -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 {
app/javascript/flavours/glitch/styles/containers.scss
-1
View File
@@ -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;
app/javascript/flavours/glitch/styles/forms.scss
-14
View File
@@ -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%);
}
app/javascript/flavours/glitch/styles/polls.scss
-12
View File
@@ -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>")