Fix .infield labels not being readable by screenreaders

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2019-01-25 12:48:59 +01:00 committed by Roeland Jago Douma
parent d9ecc4d570
commit 58ecd86f55
No known key found for this signature in database
GPG key ID: F941078878347C0C
3 changed files with 13 additions and 12 deletions

View file

@ -331,12 +331,6 @@ input[type='checkbox'].checkbox--white:checked + label:before {
background-image: url('../img/actions/checkbox-mark-white.svg');
}
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield {
display: none;
}
/* Password strength meter */
.strengthify-wrapper {
display: inline-block;
@ -838,6 +832,8 @@ footer .info .entity-name {
display: none;
}
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield,
.hidden-visually {
position: absolute;
left:-10000px;

View file

@ -917,3 +917,14 @@ progress {
animation-duration: .7s;
animation-timing-function: ease-out;
}
// Keep the labels for screen readers but hide them since we use placeholders
// Same as .hidden-visually
label.infield {
position: absolute;
left:-10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

View file

@ -256,12 +256,6 @@ body {
user-select: none;
}
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield {
display: none;
}
/* Show password toggle */
#show, #dbpassword {