mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-02 21:12:24 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[bugfix/frontend] Fix accessibility/focus issues in settings + web ui

Browse source
This commit is contained in:
tobi 2025-04-09 12:56:04 +02:00
commit bfee7041c0
23 changed files with 380 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/source/css/_colors.css
View file

@ -80,6 +80,7 @@ $profile-bg: $gray4;
$button-bg: $blue2;
$button-fg: $gray1;
$button-hover-bg: $blue3;
$button-focus-border: $blue3;
$button-danger-bg: $error3;
$button-danger-fg: $white1;

18
web/source/css/_media-wrapper.css
View file

@ -74,6 +74,14 @@
div.blurhash-container > canvas {
display: none;
}
/*
Hide focus outline on click
to avoid ugly artifacts.
*/
&:focus {
outline: none;
}
}
summary {
@ -126,6 +134,16 @@
}
}
a.photoswipe-slide {
display: inline-block;
height: 100%;
width: 100%;
&:focus {
outline-offset: -0.15rem;
}
}
video.plyr-video, .plyr {
position: absolute;
height: 100%;

18
web/source/css/_profile-header.css
View file

@ -81,6 +81,24 @@
height: $avatar-size;
width: $avatar-size;
/*
Link to open media in slide
should fill entire media wrapper.
*/
a.photoswipe-slide {
display: inline-block;
height: 100%;
width: 100%;
/*
Offset to avoid clashing with
thick border around avatars.
*/
&:focus {
outline-offset: 0.2rem;
}
}
.avatar {
/*
Fit 100% of the wrapper.

54
web/source/css/base.css
View file

@ -68,6 +68,40 @@ $br-inner: 0.2rem;
*/
$fa-fw: 1.28571429em;
/*
Outline to give links when they're
focused (ie., by clicking or tabbing to them).
*/
$link-focus-outline: 0.15rem dotted $link-fg;
/*
Outline to give buttons when they're
focused (ie., by clicking or tabbing to them).
*/
$button-focus-outline: 0.15rem dashed $button-focus-border;
/*
Outline to give input elements like radio buttons
and checkboxes when they're focused (ie., by clicking
or tabbing to them).
*/
$input-clickable-focus-outline: 0.15rem dashed $input-focus-border;
/*
Outline to give summary elements when they're
focused (ie., by clicking or tabbing to them).
*/
$summary-focus-outline: 0.1rem dashed $link-fg;
/*
Outline to give <pre> elements when they're
focused (ie., by clicking or tabbing to them).
This is used when we've got a preformatted
code block with a scroll bar inside of it.
*/
$pre-focus-outline: 0.1rem dashed $link-fg;
/******************************************
***** SECTION 2: BASIC GLOBAL STYLING *****
*******************************************/
@ -88,6 +122,9 @@ body {
a {
color: $link-fg;
&:focus {
outline: $link-focus-outline;
}
}
/*
@ -144,6 +181,14 @@ main {
&:hover {
background: $button-hover-bg;
}
&:focus {
outline: $button-focus-outline;
}
}
summary:focus {
outline: $summary-focus-outline;
}
/*
@ -164,6 +209,11 @@ input, select, textarea, .input {
border-color: $input-focus-border;
}
&[type=checkbox]:focus,
&[type=radio]:focus {
outline: $input-clickable-focus-outline;
}
&:invalid, .invalid & {
border-color: $input-error-border;
}
@ -342,6 +392,10 @@ pre, pre[class*="language-"] {
white-space: pre;
overflow-x: auto;
&:focus {
outline: $pre-focus-outline;
}
/*
Code inside a pre block, ie.,