Fix .infield labels not being readable by screenreaders

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

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;

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;
+}

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 {