fix: non-empty labels

add content to labels, use labels for form fields only

templates/loginform.php

@@ -103,7 +103,9 @@ if ($this->data['errorCode'] !== NULL)
                                 } else
                                 {
                                     ?>
-                                    <label for="username"></label>
+                                    <label for="username" class="sr-only">
+                                        <?php echo $this->t('{login:username}'); ?>
+                                    </label>
                                     <input type="text" id="username" tabindex="1" name="username"
                                            value="<?php echo htmlspecialchars($this->data['username'], ENT_QUOTES) ?>"
                                            placeholder="<?php echo htmlspecialchars($this->t('{login:username}'), ENT_QUOTES) ?>"
@@ -146,13 +148,17 @@ if ($this->data['errorCode'] !== NULL)
                                 } ?>
 
                                 <!-- Pass and OTP fields -->
-                                <label for="password"></label>
+                                <label for="password" class="sr-only">
+                                    <?php echo $this->t('{privacyidea:privacyidea:password}'); ?>
+                                </label>
                                 <input id="password" name="password" tabindex="1" type="password" value="" class="text"
                                        placeholder="<?php echo htmlspecialchars($passHint, ENT_QUOTES) ?>"/>
 
                                 <strong id="message"><?php echo $this->data['message'] ?></strong>
 
-                                <label for="otp"></label>
+                                <label for="otp" class="sr-only">
+                                    <?php echo $this->t('{privacyidea:privacyidea:otp}'); ?>
+                                </label>
                                 <input id="otp" name="otp" tabindex="1" type="password" value="" class="text"
                                        placeholder="<?php echo htmlspecialchars($otpHint, ENT_QUOTES) ?>"/>
                                 <br>
@@ -203,10 +209,8 @@ if ($this->data['errorCode'] !== NULL)
                             {
                                 ?>
                                 <div class="identifier-shown">
-                                    <?php echo htmlspecialchars($this->t('{login:organization}')); ?>
-                                    <label>
-                                        <select name="organization" tabindex="3">
-
+                                    <label for="organization"><?php echo htmlspecialchars($this->t('{login:organization}')); ?></label>
+                                    <select id="organization" name="organization" tabindex="3">
                                         <?php
                                         if (array_key_exists('selectedOrg', $this->data))
                                         {
@@ -234,7 +238,6 @@ if ($this->data['errorCode'] !== NULL)
                                             echo '<option ' . $selected . 'value="' . htmlspecialchars($orgId, ENT_QUOTES) . '">' . htmlspecialchars($orgDesc) . '</option>';
                                         } ?>
                                     </select>
-                                    </label>
                                 </div>
                             <?php } ?>
                         </div> <!-- focused -->
@@ -242,7 +245,7 @@ if ($this->data['errorCode'] !== NULL)
                 </div> <!-- form-panel -->
 
                 <div id="AlternateLoginOptions" class="groupMargin">
-                    <h3><label><?php echo $this->t('{privacyidea:privacyidea:alternate_login_options}'); ?></label></h3>
+                    <h3><?php echo $this->t('{privacyidea:privacyidea:alternate_login_options}'); ?></h3>
                     <!-- Alternate Login Options-->
                     <input id="useWebAuthnButton" name="useWebAuthnButton" type="button" value="WebAuthn"/>
                     <input id="usePushButton" name="usePushButton" type="button" value="Push"/>

www/css/loginform.css

@@ -59,3 +59,17 @@ label[for=otp] {
 .hidden {
 	display: none;
 }
+
+.sr-only {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important;
+	-webkit-clip-path: inset(50%) !important;
+	clip-path: inset(50%) !important;
+	height: 1px !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	white-space: nowrap !important;
+}