mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-12-16 14:23:01 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[bugfix] Fix a couple accessibility issues with :focus elements (#3979)

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

* fix little error

* tweaks
This commit is contained in:
tobi 2025-04-09 14:14:20 +02:00 • committed by GitHub
commit 19cfa8d126
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 405 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

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.25rem dotted $link-fg;
/*
Outline to give buttons when they're
focused (ie., by clicking or tabbing to them).
*/
$button-focus-outline: 0.25rem 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.25rem dashed $input-focus-border;
/*
Outline to give summary elements when they're
focused (ie., by clicking or tabbing to them).
*/
$summary-focus-outline: 0.25rem dotted $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.25rem dashed $link-fg;
/******************************************
***** SECTION 2: BASIC GLOBAL STYLING *****
*******************************************/
@ -88,6 +122,9 @@ body {
a {
color: $link-fg;
&:focus-visible {
outline: $link-focus-outline;
}
}
/*
@ -144,6 +181,14 @@ main {
&:hover {
background: $button-hover-bg;
}
&:focus-visible {
outline: $button-focus-outline;
}
}
summary:focus-visible {
outline: $summary-focus-outline;
}
/*
@ -164,6 +209,11 @@ input, select, textarea, .input {
border-color: $input-focus-border;
}
&[type=checkbox]:focus-visible,
&[type=radio]:focus-visible {
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.,