mirrors/thebadspace
1
0
Fork 0
mirror of https://koodu.h-i.works/projects/thebadspace synced 2025-05-06 14:41:02 -05:00
Code Packages Releases Activity

feat: add accessible form element focus indicator

Browse Source 
adds a focus indicator that passes the accessibility requirements WCAG 2.2: §1.4.11 & §2.4.7
This commit is contained in:
Zoë 2025-05-02 17:03:41 +02:00
parent c9c3b88f4d
commit 3e070676e4
No known key found for this signature in database
GPG Key ID: B4CA6F5B4034F028
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/assets/css/front/index.css
View File

@ -3,6 +3,12 @@ section.index-search {
background: var(--white);
}
/* TODO: move to a global file? it’s not only for forms. */
section.index-search :focus-visible {
outline: 2px solid var(--white);
outline-offset: -4px;
}
section.start a.search-link {
color: var(--highlight);
font-size: 2.5em;

10
public/assets/css/global/forms.css
View File

@ -14,10 +14,18 @@ input[type="text"] {
input[type="text"]:focus,
input[type="password"]:focus {
outline: solid var(--highlight);
background-color: var(--highlight);
}
/* TODO: generalise this a bit */
button:focus,
input[type="submit"]:focus,
input[type="text"]:focus,
input[type="password"]:focus {
outline: 2px solid var(--white);
outline-offset: -4px;
}
textarea {
border: 0;
border-radius: 3px;