From 526cc24f432b26d09f255b24d5d0f7844917c967 Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <mail@lucaswerkmeister.de>
Date: Mon, 9 Jul 2018 23:32:09 +0200
Subject: [PATCH] add: labels for checkboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Associating a checkbox with its label improves accessibility and makes
it more convenient to toggle the checkbox.

For most checkboxes, this adds an `id` for the checkbox and associates
the label with it via the `for` attribute, but for checkboxes in a loop
we can’t use that (multiple checkboxes would have the same `id`), so
there the technique of wrapping the input inside the label is used
instead.

Change-Id: I01b3b8cc57bcdb667bae27f6d88e3c65533a21f5
---
 .../pages/account/domain/PingConfigForm.templ  |  8 ++++----
 src/club/wpia/gigi/pages/main/Signup.templ     |  2 +-
 .../wpia/gigi/pages/wot/RequestTTPForm.templ   |  4 ++--
 .../wpia/gigi/pages/wot/VerificationForm.templ | 18 +++++++++---------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/club/wpia/gigi/pages/account/domain/PingConfigForm.templ b/src/club/wpia/gigi/pages/account/domain/PingConfigForm.templ
index e0a7a893..de82bb0a 100644
--- a/src/club/wpia/gigi/pages/account/domain/PingConfigForm.templ
+++ b/src/club/wpia/gigi/pages/account/domain/PingConfigForm.templ
@@ -1,7 +1,7 @@
 <h3><?=_Verification mechanisms?></h3>
 
 <div class="panel panel-info panel-activatable">
-  <div class="panel-heading"><input type="checkbox" name="emailType" value="y"<?=$!mail?>> <?=_Verify by sending an email to authoritative email addresses?></div>
+  <div class="panel-heading"><input type="checkbox" name="emailType" id="emailType" value="y"<?=$!mail?>> <label for="emailType"><?=_Verify by sending an email to authoritative email addresses?></label></div>
   <div class="panel-body">
     <?=_Select the destination mail address:?><br/>
     <? foreach($authEmails) { ?>
@@ -11,21 +11,21 @@
   </div>
 </div>
 <div class="panel panel-info panel-activatable">
-  <div class="panel-heading"><input type="checkbox" name="DNSType" value="y"<?=$!dns?>> <?=_Verify by reading DNS-TXT entries?></div>
+  <div class="panel-heading"><input type="checkbox" name="DNSType" id="DNSType" value="y"<?=$!dns?>> <label for="DNSType"><?=_Verify by reading DNS-TXT entries?></label></div>
   <div class="panel-body">
     <?=_Please insert the following DNS TXT entry into the Zone-file of your domain:?><br/>
     <pre><?=$tokenName?>.<?=$dnsPrefix?>._auth IN TXT <?=$tokenValue?></pre>
   </div>
 </div>
 <div class="panel panel-info panel-activatable">
-  <div class="panel-heading"><input type="checkbox" name="HTTPType" value="y"<?=$!http?>> <?=_Verify by reading HTTP-content?></div>
+  <div class="panel-heading"><input type="checkbox" name="HTTPType" id="HTTPType" value="y"<?=$!http?>> <label for="HTTPType"><?=_Verify by reading HTTP-content?></label></div>
   <div class="panel-body">
     <?=_Please make the following content available at?> <pre class='string'>http://<span class='exampleDomain'>example.org</span>/<?=$httpPrefix?><?=$tokenName?>.txt</pre><br/>
     <pre><?=$tokenValue?></pre>
   </div>
 </div>
 <div class="panel panel-info panel-activatable">
-  <div class="panel-heading"><input type="checkbox" name="SSLType" value="y"<?=$!ssl?>> <?=_Verify by searching for installed certificate.?></div>
+  <div class="panel-heading"><input type="checkbox" name="SSLType" id="SSLType" value="y"<?=$!ssl?>> <label for="SSLType"><?=_Verify by searching for installed certificate.?></label></div>
   <div class="panel-body">
     <?=_Please list up to four services using your certificate. You need to have one of them up and using a valid ${appName} certificate or a specific self-signed certificate in order to pass this test?>:
     <?=_The self-signed certificate needs to contain your domain as CN and ${tokenValue} as organization unit.?> <?=_You can use these commands to create such a certificate:?>
diff --git a/src/club/wpia/gigi/pages/main/Signup.templ b/src/club/wpia/gigi/pages/main/Signup.templ
index d8d28adf..b50e78ea 100644
--- a/src/club/wpia/gigi/pages/main/Signup.templ
+++ b/src/club/wpia/gigi/pages/main/Signup.templ
@@ -47,7 +47,7 @@
   </tr>
 
   <tr>
-    <td colspan="3"><input type="checkbox" name="tos_agree" value="1"><?=_I agree to the Terms of Service (!(/policy/ToS)ToS!'</a>').?></td>
+    <td colspan="3"><input type="checkbox" name="tos_agree" id="tos_agree" value="1"><label for="tos_agree"><?=_I agree to the Terms of Service (!(/policy/ToS)ToS!'</a>').?></label></td>
   </tr>
 
   <tr>
diff --git a/src/club/wpia/gigi/pages/wot/RequestTTPForm.templ b/src/club/wpia/gigi/pages/wot/RequestTTPForm.templ
index 85d96f9d..04bcd076 100644
--- a/src/club/wpia/gigi/pages/wot/RequestTTPForm.templ
+++ b/src/club/wpia/gigi/pages/wot/RequestTTPForm.templ
@@ -8,8 +8,8 @@
 		</select></td>
 	</tr>
 <!--	<tr>
-		<td class="DataTD"><?=_I want to take part in the TTP Topup programme?></td>
-		<td class="DataTD"><input type="checkbox" name="ttptopup" value="1"></td>
+		<td class="DataTD"><label for="ttptopup"><?=_I want to take part in the TTP Topup programme?></label></td>
+		<td class="DataTD"><input type="checkbox" name="ttptopup" id="ttptopup" value="1"></td>
 	</tr>-->
 	<tr>
 		<td colspan="2" >
diff --git a/src/club/wpia/gigi/pages/wot/VerificationForm.templ b/src/club/wpia/gigi/pages/wot/VerificationForm.templ
index 6f60eba6..277dd8c6 100644
--- a/src/club/wpia/gigi/pages/wot/VerificationForm.templ
+++ b/src/club/wpia/gigi/pages/wot/VerificationForm.templ
@@ -8,7 +8,7 @@
 <? foreach($names) { ?>
 	<tr>
 		<td><?=_Name?>: </td>
-		<td><input type="checkbox" name="verifiedName" value="<?=$nameId?>"<?=$checked?>><span class="accountdetail"><?=$nameExplicit?></span></td>
+		<td><label><input type="checkbox" name="verifiedName" value="<?=$nameId?>"<?=$checked?>><span class="accountdetail"><?=$nameExplicit?></span></label></td>
 	</tr>
 <? } ?>
 	<tr>
@@ -16,8 +16,8 @@
 		<td><span class="accountdetail dob"><?=$dob?> (<?=$dobFmt2?>)</span></td>
 	</tr>
 	<tr>
-		<td><input type="checkbox" name="certify" value="1" required></td>
-		<td><?=_I certify that ${name} has appeared in person.?></td>
+		<td><input type="checkbox" name="certify" id="certify" value="1" required></td>
+		<td><label for="certify"><?=_I certify that ${name} has appeared in person.?></label></td>
 	</tr>
 	<tr>
 		<td><?=_Location Country?></td>
@@ -34,12 +34,12 @@
 		<td><input class="form-control" type="text" name="date" value="<?=$date?>" required><br/><?=_The date when the verification took place. Please adjust the date if you verified the person on a different day (YYYY-MM-DD).?></td>
 	</tr>
 	<tr>
-		<td><input type="checkbox" name="assertion" value="1" required></td>
-		<td><?=_I believe that the assertion of identity I am making is correct, complete and verifiable. I have seen original documentation attesting to this identity. I accept that the ${appName} Arbitrator may call upon me to provide evidence in any dispute, and I may be held responsible.?></td>
+		<td><input type="checkbox" name="assertion" id="assertion" value="1" required></td>
+		<td><label for="assertion"><?=_I believe that the assertion of identity I am making is correct, complete and verifiable. I have seen original documentation attesting to this identity. I accept that the ${appName} Arbitrator may call upon me to provide evidence in any dispute, and I may be held responsible.?></label></td>
 	</tr>
 	<tr>
-		<td><input type="checkbox" name="rules" value="1" required></td>
-		<td><?=_I have read and understood the Terms of Service (!(/policy/ToS)ToS!'</a>'), Verification Policy and the Verification Handbook. I am making this verification subject to and in compliance with the ToS, Verification Policy and Handbook.?></td>
+		<td><input type="checkbox" name="rules" id="rules" value="1" required></td>
+		<td><label for="rules"><?=_I have read and understood the Terms of Service (!(/policy/ToS)ToS!'</a>'), Verification Policy and the Verification Handbook. I am making this verification subject to and in compliance with the ToS, Verification Policy and Handbook.?></label></td>
 	</tr>
 	<tr>
 		<td><?=_Policy?>: </td>
@@ -58,8 +58,8 @@
 		<td><select name="verificationType"><? foreach($ats) { ?><option value="<?=$id?>"<?=$sel?>><?=$type?></option><? } ?></select></td>
 	</tr>
 	<tr>
-		<td><input type="checkbox" name="passwordReset" value="1" <? if($aword) { ?>checked<? } ?>></td>
-		<td><?=_I have conducted a password reset with verification. The established "A-Word" is:?><input type="text" name="passwordResetValue" value="<? if($aword) { ?><?=$aword?><? } ?>"></td>
+		<td><input type="checkbox" name="passwordReset" id="passwordReset" value="1" <? if($aword) { ?>checked<? } ?>></td>
+		<td><label for="passwordReset"><?=_I have conducted a password reset with verification. The established "A-Word" is:?><input type="text" name="passwordResetValue" value="<? if($aword) { ?><?=$aword?><? } ?>"></label></td>
 	</tr>
 	<tr>
 		<td colspan="2">
-- 
2.39.2