fix: Add explicit labels (using: for & id) to input fields (#6577)

* Add explicit labels using (for & id)

This change makes the experience of using a screenreader better for
visually impaired people.

* Add for attribute to match input id

* Update templates/web/common/includes/display_login_register.tt.html

Co-authored-by: VaiTon <eyadlorenzo@gmail.com>

* Update templates/web/pages/login_form/login.tt.html

Co-authored-by: VaiTon <eyadlorenzo@gmail.com>

* Fix input for userid/email

* Add input id to submit

* Add id to checkbox

* Added input id for submit button

Co-authored-by: VaiTon <eyadlorenzo@gmail.com>

templates/web/common/includes/display_login_register.tt.html

@@ -5,18 +5,18 @@
 <form method="post" action="/cgi/session.pl">
 	<div class="row">
 		<div class="small-12 columns">
-			<label>[% lang('login_username_email') %]
-				<input type="text" name="user_id" autocomplete="username" required>
+			<label for="user_id">[% lang('login_username_email') %]
+				<input type="text" name="user_id" id="user_id" autocomplete="username" required>
 			</label>
 		</div>
 		<div class="small-12 columns">
-			<label>[% lang('password') %]
-				<input type="password" name="password" autocomplete="current-password" required>
+			<label for="password" >[% lang('password') %]
+				<input type="password" name="password" id="password" autocomplete="current-password" required>
 			</label>
 		</div>
 		<div class="small-12 columns">
-			<label>
-				<input type="checkbox" name="remember_me" checked>
+			<label for="remember_me_checkbox">
+				<input type="checkbox" name="remember_me" id="remember_me_checkbox" checked>
 				[% lang('remember_me') %]
 			</label>
 		</div>
@@ -30,4 +30,4 @@
     <a href="/cgi/reset_password.pl">[% lang('forgotten_password') %] </a>
 </p>
 
-<!-- end templates/[% template.name %] -->
+<!-- end templates/[% template.name %] -->

templates/web/pages/change_password/change_password.tt.html

@@ -5,35 +5,35 @@
     <form method="post" action="/cgi/change_password.pl" enctype="multipart/form-data">
         <div class="row">
             <div class="large-12 columns">
-                <label>
+                <label for="current_password">
                     [% lang('password') %]
-                    <input type="password" name="current_password" autocomplete="current-password" required="required" />
+                    <input type="password" name="current_password" id="current_password" autocomplete="current-password" required="required" />
                 </label>
             </div>
         </div>
 
         <div class="row">
             <div class="large-12 columns">
-                <label>
+                <label for="new_password">
                     [% lang('password_new') %]
-                    <input type="password" name="password" autocomplete="new-password" required="required" />
+                    <input type="password" name="password" id="new_password" autocomplete="new-password" required="required" />
                 </label>
             </div>
         </div>
 
         <div class="row">
             <div class="large-12 columns">
-                <label>
+                <label for="new_password_confirm">
                     [% lang('password_confirm') %]
-                    <input type="password" name="confirm_password" autocomplete="new-password" required="required" />
+                    <input type="password" name="confirm_password" id="new_password_confirm" autocomplete="new-password" required="required" />
                 </label>
             </div>
         </div>
 
         <div class="row">
             <div class="large-12 columns">
-                <label>
-                    <input type="submit" name="submit" class="button" />
+                <label for="submit_form">
+                    <input type="submit" name="submit" class="button" id="submit_form" />
                 </label>
             </div>
         </div>
@@ -44,4 +44,4 @@
     </div>
 [% END %]
 
-<!-- end templates/[% template.name %] -->
+<!-- end templates/[% template.name %] -->

templates/web/pages/login_form/login.tt.html

@@ -23,8 +23,8 @@
 
     <div class="row">
         <div class="large-12 columns">
-            <label>
-                <input type="submit" name="submit" class="button" />
+            <label for="submit">
+                <input type="submit" name="submit" class="button" id="submit" />
                 <input type="hidden" name="redirect" value="[% redirect %]"/>
             </label>
         </div>

templates/web/pages/reset_password/reset_password.tt.html

@@ -5,9 +5,9 @@
     [% INCLUDE 'web/common/includes/error_list.tt.html' %]
     <form method="post" action="/cgi/reset_password.pl" enctype="multipart/form-data">
         [% IF type == 'send_email' %]
-            <label>
+            <label for="userid_or_email">
                 [% lang('userid_or_email') %]
-                <input type="text" name="userid_or_email"/>
+                <input type="text" name="userid_or_email" id="userid_or_email"/>
             </label>
         [% ELSIF type == 'reset' %]
             <table role="presentation">
@@ -43,4 +43,4 @@
     [% END %]
 [% END %]
 
-<!-- end templates/[% template.name %] -->
+<!-- end templates/[% template.name %] -->