Mirrors/keyoxide-web
1
0
Fork 1
mirror of https://codeberg.org/keyoxide/keyoxide-web.git synced 2024-12-22 23:09:29 -07:00
Code Issues Projects Releases Packages Wiki Activity

Fix accessibility of radio input

Browse source
This commit is contained in:
Yarmo Mackenbach 2021-06-10 14:30:56 +02:00
parent 80c504580f
commit b9b409853d
No known key found for this signature in database
GPG key ID: 37367F4AF4087AD1
2 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
static/styles.css
View file

@ -33,6 +33,11 @@
input:focus, textarea:focus { input:focus, textarea:focus {
background: azure; background: azure;
} }
input[type="radio"]:focus + label {
box-shadow: 0 0 0 3px lightskyblue;
background: azure !important;
color: var(--grey-900) !important;
}
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -398,32 +403,49 @@ form textarea {
font-size: 0.9rem; font-size: 0.9rem;
border: 1px solid #444; border: 1px solid #444;
} }
.button-wrapper, .radio-wrapper { .button-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
}
form .button-wrapper, form .radio-wrapper {
margin: 8px 0; margin: 8px 0;
} }
form input[type="radio"] { .radio-wrapper {
display: none; display: flex;
flex-wrap: wrap;
margin: 8px 0;
} }
form input[type="radio"] + label { .radio-wrapper input[type="radio"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.radio-wrapper input[type="radio"] + label {
margin: 0;
padding: 2px 8px; padding: 2px 8px;
background-color: #fff; background-color: #fff;
border-radius: 3px; border: solid var(--purple-400);
border: solid 2px var(--purple-400); border-width: 2px 1px;
cursor: pointer; cursor: pointer;
} }
form input[type="radio"] + label:hover { .radio-wrapper input[type="radio"]:first-of-type + label {
background-color: var(--purple-100); border-radius: 4px 0 0 4px;
border: solid 2px var(--purple-500); border-left-width: 2px;
} }
form input[type="radio"]:checked + label { .radio-wrapper input[type="radio"]:last-of-type + label {
border-radius: 0 4px 4px 0;
border-right-width: 2px;
}
.radio-wrapper input[type="radio"]:focus + label {
z-index: 1;
}
.radio-wrapper input[type="radio"] + label:hover {
background-color: var(--purple-100);
border-color: var(--purple-500);
}
.radio-wrapper input[type="radio"]:checked + label {
color: #fff; color: #fff;
background-color: var(--purple-600); background-color: var(--purple-600);
border: solid 2px var(--purple-600); border-color: var(--purple-600);
} }
input[type="button"], input[type="submit"], button, a.button { input[type="button"], input[type="submit"], button, a.button {
@ -441,6 +463,9 @@ input[type="button"], input[type="submit"], button, a.button {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
input[type="button"]:focus, input[type="submit"]:focus, button:focus, a.button:focus {
background-color: azure;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:hover { input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:hover {
background-color: var(--purple-500); background-color: var(--purple-500);
border-color: var(--purple-500); border-color: var(--purple-500);

6
views/index.pug
View file

@ -42,11 +42,11 @@ block content
fieldset(role="radiogroup").radio-wrapper fieldset(role="radiogroup").radio-wrapper
legend Protocol legend Protocol
input#protocol-hkp(type="radio" name="protocol" value="hkp" checked="true") input#protocol-hkp(type="radio" name="protocol" value="hkp" checked="true")
label(for="protocol-hkp" tabindex="0") HKP label(for="protocol-hkp") HKP
input#protocol-wkd(type="radio" name="protocol" value="wkd") input#protocol-wkd(type="radio" name="protocol" value="wkd")
label(for="protocol-wkd" tabindex="0") WKD label(for="protocol-wkd") WKD
input#protocol-sig(type="radio" name="protocol" value="sig") input#protocol-sig(type="radio" name="protocol" value="sig")
label(for="protocol-sig" tabindex="0") Signature label(for="protocol-sig") Signature
input(type="submit" value="Generate profile") input(type="submit" value="Generate profile")
if highlights.length > 0 if highlights.length > 0