From 58ecd86f55f18696b6b96f5fc06591301b296dee Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 25 Jan 2019 12:48:59 +0100
Subject: [PATCH] Fix .infield labels not being readable by screenreaders
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
core/css/guest.css | 8 ++------
core/css/inputs.scss | 11 +++++++++++
core/css/styles.scss | 6 ------
3 files changed, 13 insertions(+), 12 deletions(-)
diff --git a/core/css/guest.css b/core/css/guest.css
index c924255a55f..f7d9280f9a7 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -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;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 37914365a77..e9bee2c62be 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -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;
+}
diff --git a/core/css/styles.scss b/core/css/styles.scss
index efd18bf2e52..a066c607522 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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 {
--
GitLab