From 37b3a9a9abd46c202878655717244a4f1a49f304 Mon Sep 17 00:00:00 2001
From: discomrade <nice@try.fbi>
Date: Sat, 26 Feb 2022 03:03:20 -0100
Subject: [PATCH] Add labels to form input elements

---
 js/auto-reload.js            |  2 +-
 templates/post_form.html     | 82 +++++++++++++++++++-----------------
 templates/report_delete.html |  4 +-
 3 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/js/auto-reload.js b/js/auto-reload.js
index b9bcc9c8..6b024dba 100644
--- a/js/auto-reload.js
+++ b/js/auto-reload.js
@@ -30,7 +30,7 @@ $(document).ready(function(){
 	var countdown_interval;
 
 	// Add an update link
-	$('span#thread-links-bottom').append("<span id='updater'><a href='#' id='update_thread'>["+_("Update")+"]</a> (<input type='checkbox' id='auto_update_status'> "+_("Auto")+") <span id='update_secs'></span></span>");
+	$('span#thread-links-bottom').append("<span id='updater'><a href='#' id='update_thread'>["+_("Update")+"]</a> (<label><input type='checkbox' id='auto_update_status'> "+_("Auto")+"</label>) <span id='update_secs'></span></span>");
 
 	// Set the updater checkbox according to user setting
 	if (localStorage.auto_thread_update === 'true') {
diff --git a/templates/post_form.html b/templates/post_form.html
index 12286034..8efa6e53 100644
--- a/templates/post_form.html
+++ b/templates/post_form.html
@@ -11,17 +11,21 @@
 	<table>
 		{% if not config.field_disable_name or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
 			<th>
-				{% trans %}Name{% endtrans %}
+				<label for="name">{% trans %}Name{% endtrans %}</label>
 				{{ antibot.html() }}
 			</th>
 			<td>
-				<input type="text" name="name" size="25" maxlength="35" autocomplete="off"> {% if config.allow_no_country and config.country_flags %}<input id="no_country" name="no_country" type="checkbox"> <label for="no_country">{% trans %}Don't show my flag{% endtrans %}</label>{% endif %}
+				<input type="text" name="name" id="name" size="25" maxlength="35" autocomplete="off"> {% if config.allow_no_country and config.country_flags %}<input type="checkbox" name="no_country" id="no_country"> <label for="no_country">{% trans %}Don't show my flag{% endtrans %}</label>{% endif %}
 				{{ antibot.html() }}
 			</td>
 		</tr>{% endif %}
 		{% if not config.field_disable_email or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
 			<th>
-				{% trans %}Email{% endtrans %}
+				{% if config.field_email_selectbox %}
+				<label for="email_selectbox">{% trans %}Options{% endtrans %}</label>
+				{% else %}
+				<label for="email">{% trans %}Email{% endtrans %}</label>
+				{% endif %}
 				{{ antibot.html() }}
 			</th>
 			<td>
@@ -32,39 +36,39 @@
 					{% if not config.always_noko %}<option value="noko">noko</option>{% endif %}
 				</select>
 				{% else %}
-				<input type="text" name="email" size="25" maxlength="30" autocomplete="off">
+				<input type="text" name="email" id="email" size="25" maxlength="30" autocomplete="off">
 				{% endif %}
 				{{ antibot.html() }}
 				{% if not (not (config.field_disable_subject or (id and config.field_disable_reply_subject)) or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri))) %}
-				<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input id="spoiler" name="spoiler" type="checkbox"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>				{% endif %}
+				<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input type="checkbox" name="spoiler" id="spoiler"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>				{% endif %}
 				{% endif %}
 				{{ antibot.html() }}
 			</td>
 		</tr>{% endif %}
 		{% if not (config.field_disable_subject or (id and config.field_disable_reply_subject)) or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
 			<th>
-				{% trans %}Subject{% endtrans %}
+				<label for="subject">{% trans %}Subject{% endtrans %}</label>
 				{{ antibot.html() }}
 			</th>
 			<td>
-				<input style="float:left;" type="text" name="subject" size="25" maxlength="100" autocomplete="off">
-				<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input id="spoiler" name="spoiler" type="checkbox"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>{% endif %}
+				<input style="float:left;" type="text" name="subject" id="subject" size="25" maxlength="100" autocomplete="off">
+				<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input type="checkbox" name="spoiler" id="spoiler"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>{% endif %}
 			</td>
 		</tr>
 		{% endif %}
 		<tr>
 			<th>
-				{% trans %}Comment{% endtrans %}
+				<label for="body">{% trans %}Comment{% endtrans %}</label>
 				{{ antibot.html() }}
 			</th>
 			<td>
 				<textarea name="body" id="body" rows="5" cols="35"></textarea>
 				<br/>
-				<span ID="countchar" class="countdown"></span>											  
+				<span id="countchar" class="countdown"></span>
 				{{ antibot.html() }}
 				{% if not (not (config.field_disable_subject or (id and config.field_disable_reply_subject)) or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri))) %}
 				{% if not (not config.field_disable_email or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri))) %}
-				<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input id="spoiler" name="spoiler" type="checkbox"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>{% endif %}
+				<input accesskey="s" style="margin-left:2px;" type="submit" name="post" value="{% if id %}{{ config.button_reply }}{% else %}{{ config.button_newtopic }}{% endif %}" />{% if config.spoiler_images %} <input type="checkbox" name="spoiler" id="spoiler"> <label for="spoiler">{% trans %}Spoiler Image{% endtrans %}</label>{% endif %}
 				{% endif %}
 				{% endif %}
 			</td>
@@ -72,49 +76,49 @@
 		{% if config.recaptcha %}
 		<tr>
 			<th>
-				{% trans %}Verification{% endtrans %}
+				<label for="captcha">{% trans %}Verification{% endtrans %}</label>
 				{{ antibot.html() }}
 			</th>
 			<td>
-				<div class="g-recaptcha" data-sitekey="{{ config.recaptcha_public }}"></div>
+				<div id="captcha" class="g-recaptcha" data-sitekey="{{ config.recaptcha_public }}"></div>
 				{{ antibot.html() }}
 			</td>
 		</tr>
 		{% endif %}
 		{% if config.captcha.enabled %}
-		    <tr class='captcha'>
-			    <th>
-				    {% trans %}Verification{% endtrans %}
-			    </th>
-			    <td>
-            		{% if not config.captcha.local %}<script>load_captcha("{{ config.captcha.provider_get }}", "{{ config.captcha.extra }}");</script><noscript>{% endif %}
-				    <input id='captcha_text' class='captcha_text' type='text' name='captcha_text' size='32' maxlength='6' autocomplete='off'>
-				    <div class="captcha_html">
-					    <img id="captcha_img" src="{{ config.captcha.provider_get }}?mode=get&raw=1" onClick="this.src='{{ config.captcha.provider_get }}?mode=get&raw=1&'+Date.now();document.getElementById('captcha_text').value = '';">
-				    </div>
-            		{% if not config.captcha.local %}</noscript>{% endif %}
-			    </td>
-		    </tr>
+			<tr class='captcha'>
+				<th>
+					<label for="captcha_text">{% trans %}Verification{% endtrans %}</label>
+				</th>
+				<td>
+					{% if not config.captcha.local %}<script>load_captcha("{{ config.captcha.provider_get }}", "{{ config.captcha.extra }}");</script><noscript>{% endif %}
+					<input type='text' name='captcha_text' id='captcha_text' class='captcha_text' size='32' maxlength='6' autocomplete='off'>
+					<div class="captcha_html">
+						<img id="captcha_img" src="{{ config.captcha.provider_get }}?mode=get&raw=1" onClick="this.src='{{ config.captcha.provider_get }}?mode=get&raw=1&'+Date.now();document.getElementById('captcha_text').value = '';">
+					</div>
+					{% if not config.captcha.local %}</noscript>{% endif %}
+				</td>
+			</tr>
 		{% elseif config.new_thread_capt %}
  			{% if not id %} 
  			<tr class='captcha'>
 				<th>
-				{% trans %}Verification{% endtrans %}
+					<label for="captcha_text">{% trans %}Verification{% endtrans %}</label>
 				</th>
 				<td>
-            		{% if not config.captcha.local %}<script>load_captcha("{{ config.captcha.provider_get }}", "{{ config.captcha.extra }}");</script><noscript>{% endif %}
-					<input id='captcha_text' class='captcha_text' type='text' name='captcha_text' size='32' maxlength='6' autocomplete='off'>
+					{% if not config.captcha.local %}<script>load_captcha("{{ config.captcha.provider_get }}", "{{ config.captcha.extra }}");</script><noscript>{% endif %}
+					<input type='text' name='captcha_text' id='captcha_text' class='captcha_text' size='32' maxlength='6' autocomplete='off'>
 					<div class="captcha_html">
 						<img id="captcha_img" src="{{ config.captcha.provider_get }}?mode=get&raw=1" onClick="this.src='{{ config.captcha.provider_get }}?mode=get&raw=1&'+Date.now();document.getElementById('captcha_text').value = '';">
 					</div>
-            		{% if not config.captcha.local %}</noscript>{% endif %}
+					{% if not config.captcha.local %}</noscript>{% endif %}
 				</td>
 			</tr>
 			{% endif %}
 		{% endif %}
 		{% if config.user_flag %}
 			<tr>
-				<th>{% trans %}Flag{% endtrans %}</th>
+				<th><label for="user_flag">{% trans %}Flag{% endtrans %}</label>
 				<td>
 					<select name="user_flag" id="user_flag" style="float:left">
 						<option value="">{% trans %}None{% endtrans %}</option>
@@ -130,9 +134,9 @@
 		{% endif %}
 		{% if config.allowed_tags and not id %}
 			<tr>
-				<th>{% trans %}Tag{% endtrans %}</th>
+				<th><label for="tag">{% trans %}Tag{% endtrans %}</label></th>
 				<td>
-					<select name="tag">
+					<select name="tag" id="tag">
 						{% for id, tag in config.allowed_tags %}
 							<option value="{{ id|e }}">{{ tag|e }}</option>
 						{% endfor %}
@@ -142,7 +146,7 @@
 		{% endif %}
 		<tr id="upload">
 			<th>
-				{% trans %}File{% endtrans %}
+				<label for="upload_file">{% trans %}File{% endtrans %}</label>
 			</th>
 			<td>
 				<input type="file" name="file_multiple[]" id="upload_file" multiple/>
@@ -158,7 +162,7 @@
 					<div style="float:none;text-align:left" id="upload_url">
 						<label for="file_url">{% trans %}Or URL{% endtrans %}</label>: 
 						{% for counter in 1..config.max_images %}
-						<input style="display:inline" type="text" id="file_url{{ counter }}" name="file_url{{ counter }}" size="35">
+						<input style="display:inline" type="text" name="file_url{{ counter }}" id="file_url{{ counter }}" size="35">
 						</br>
 						{% endfor %}
 					</div>
@@ -169,11 +173,11 @@
 		{% if config.enable_embedding %}
 		<tr id="upload_embed">
 			<th>
-				{% trans %}Embed{% endtrans %}
+				<label for="embed">{% trans %}Embed{% endtrans %}</label>
 				{{ antibot.html() }}
 			</th>
 			<td>
-				<input type="text" name="embed" value="" size="30" maxlength="120" autocomplete="off">
+				<input type="text" name="embed" id="embed" value="" size="30" maxlength="120" autocomplete="off">
 			</td>
 		</tr>
 		{% endif %}
@@ -200,11 +204,11 @@
 		{% endif %}
 		{% if not config.field_disable_password or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %}<tr>
 			<th>
-				{% trans %}Password{% endtrans %}
+				<label for="password">{% trans %}Password{% endtrans %}</label>
 				{{ antibot.html() }}
 			</th>
 			<td>
-				<input type="text" name="password" value="" size="12" maxlength="18" autocomplete="off"> 
+				<input type="text" name="password" id="password" value="" size="12" maxlength="18" autocomplete="off">
 				<span class="unimportant">{% trans %}(For file deletion.){% endtrans %}</span>
 				{{ antibot.html() }}
 			</td>
diff --git a/templates/report_delete.html b/templates/report_delete.html
index 3b765941..542560f7 100644
--- a/templates/report_delete.html
+++ b/templates/report_delete.html
@@ -2,8 +2,8 @@
 	{% if config.allow_delete %}
 	<div id="delete-fields">
 		{% trans %}Delete Post{% endtrans %} [<input title="Delete file only" type="checkbox" name="file" id="delete_file" />
-		 <label for="delete_file">{% trans %}File{% endtrans %}</label>] <label for="password">{% trans %}Password{% endtrans %}</label> 
-		<input id="password" type="password" name="password" size="12" maxlength="18" />
+		 <label for="delete_file">{% trans %}File{% endtrans %}</label>] <label for="delete_password">{% trans %}Password{% endtrans %}</label>
+		<input id="delete_password" type="password" name="password" size="12" maxlength="18" />
 		<input type="submit" name="delete" value="{% trans %}Delete{% endtrans %}" />
 	</div>
 	{% endif %}