]> WPIA git - gigi.git/commitdiff
add: labels for checkboxes
authorLucas Werkmeister <mail@lucaswerkmeister.de>
Mon, 9 Jul 2018 21:32:09 +0000 (23:32 +0200)
committerLucas Werkmeister <mail@lucaswerkmeister.de>
Mon, 9 Jul 2018 22:26:35 +0000 (00:26 +0200)
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

src/club/wpia/gigi/pages/account/domain/PingConfigForm.templ
src/club/wpia/gigi/pages/main/Signup.templ
src/club/wpia/gigi/pages/wot/RequestTTPForm.templ
src/club/wpia/gigi/pages/wot/VerificationForm.templ

index e0a7a893789f763c73f01161c6cf0ebc59d2b4c0..de82bb0ac695fc8d913e30eb806f3d9b27421d00 100644 (file)
@@ -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) { ?>
   </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:?>
index d8d28adfb34a303ef20f178e99a0a8e24cc6cf76..b50e78ea4675e2af6e2442ec91debce533753514 100644 (file)
@@ -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>
index 85d96f9d7a62d9b8a6bde58bc157658acc7cb144..04bcd076f68adedbf41294cc8c728b57607ee8df 100644 (file)
@@ -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" >
index 6f60eba6e8d23e06ce99ebf5ee9c0e2a4ab58768..277dd8c6b603531c4133599930793e783d6130c7 100644 (file)
@@ -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>
                <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">