Fix .infield labels not being readable by screenreaders

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/core/css/guest.css b/core/css/guest.css
index c924255a55f1358bf5d442f98212793c214ccfb6..f7d9280f9a764ae98d4215157a9bc9237829e358 100644 (file)
--- 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 37914365a774a6e39e64a122c55dffaf92374619..e9bee2c62be73715f535a8163790fe2a83ea66b5 100644 (file)
--- 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 efd18bf2e52f7387d0c2f2f1697ee22118b13d65..a066c60752227e428444e49e53df5571a6f56be3 100644 (file)
--- 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 {