Improve accessibility - associate label and fields
authorBradley Taylor <hello@brad-taylor.co.uk>
Mon, 3 Jan 2022 17:39:03 +0000 (17:39 +0000)
committerBradley Taylor <hello@brad-taylor.co.uk>
Mon, 3 Jan 2022 17:39:03 +0000 (17:39 +0000)
CRM/Contact/Form/Edit/Email.php
CRM/Contact/Form/Edit/Phone.php
templates/CRM/Contact/Form/Edit/Phone.tpl
templates/CRM/Contact/Form/Inline/Phone.tpl
templates/CRM/Event/Form/ManageEvent/Location.tpl

index f6c1a3cbec124217ddd9689441bc06f007847455..fb073da005f898fe15dc8aeac93adc8e33afbf76 100644 (file)
@@ -42,7 +42,11 @@ class CRM_Contact_Form_Edit_Email {
     $form->applyFilter('__ALL__', 'trim');
 
     //Email box
-    $form->addField("email[$blockId][email]", ['entity' => 'email', 'aria-label' => ts('Email %1', [1 => $blockId])]);
+    $form->addField("email[$blockId][email]", [
+      'entity' => 'email',
+      'aria-label' => ts('Email %1', [1 => $blockId]),
+      'label' => ts('Email %1', [1 => $blockId]),
+    ]);
     $form->addRule("email[$blockId][email]", ts('Email is not valid.'), 'email');
     if (isset($form->_contactType) || $blockEdit) {
       //Block type
index 251829acf149d31c7161e9a8b2f944dd36ce5d3b..9d652f1d8e3b44858b90f89356480549aa8f2a78 100644 (file)
@@ -48,8 +48,17 @@ class CRM_Contact_Form_Edit_Phone {
       'placeholder' => NULL,
     ]);
     //main phone number with crm_phone class
-    $form->addField("phone[$blockId][phone]", ['entity' => 'phone', 'class' => 'crm_phone twelve', 'aria-label' => ts('Phone %1', [1 => $blockId])]);
-    $form->addField("phone[$blockId][phone_ext]", ['entity' => 'phone', 'aria-label' => ts('Phone Extension %1', [1 => $blockId])]);
+    $form->addField("phone[$blockId][phone]", [
+      'entity' => 'phone',
+      'class' => 'crm_phone twelve',
+      'aria-label' => ts('Phone %1', [1 => $blockId]),
+      'label' => ts('Phone %1:', [1 => $blockId]),
+    ]);
+    $form->addField("phone[$blockId][phone_ext]", [
+      'entity' => 'phone',
+      'aria-label' => ts('Phone Extension %1', [1 => $blockId]),
+      'label' => ts('ext.', ['context' => 'phone_ext']),
+    ]);
     if (isset($form->_contactType) || $blockEdit) {
       //Block type select
       $form->addField("phone[$blockId][location_type_id]", [
index 9e4131ca6e34e3dc25d16300177f038f668bdda2..aa7f6225c990421097ed419a2907893939d4e0e1 100644 (file)
@@ -24,7 +24,7 @@
   </tr>
 {/if}
 <tr id="Phone_Block_{$blockId}">
-  <td>{$form.phone.$blockId.phone.html} {ts context="phone_ext"}ext.{/ts}&nbsp;{$form.phone.$blockId.phone_ext.html|crmAddClass:four}&nbsp;</td>
+  <td>{$form.phone.$blockId.phone.html} {$form.phone.$blockId.phone_ext.label}&nbsp;{$form.phone.$blockId.phone_ext.html|crmAddClass:four}&nbsp;</td>
   {if $className eq 'CRM_Contact_Form_Contact'}
   <td>{$form.phone.$blockId.location_type_id.html}</td>
   {/if}
index dfa4bca072159428fa0399041cce8f303805d50d..b84bc1f718718423606e9e7ef12dafb617b125b5 100644 (file)
@@ -31,7 +31,7 @@
     {section name='i' start=1 loop=$totalBlocks}
     {assign var='blockId' value=$smarty.section.i.index}
     <tr id="Phone_Block_{$blockId}" {if $blockId gt $actualBlockCount}class="hiddenElement"{/if}>
-        <td>{$form.phone.$blockId.phone.html} {ts context="phone_ext"}ext.{/ts}&nbsp;{$form.phone.$blockId.phone_ext.html|crmAddClass:four}&nbsp;</td>
+        <td>{$form.phone.$blockId.phone.html} {$form.phone.$blockId.phone_ext.label}&nbsp;{$form.phone.$blockId.phone_ext.html|crmAddClass:four}&nbsp;</td>
         <td>{$form.phone.$blockId.location_type_id.html}</td>
         <td>{$form.phone.$blockId.phone_type_id.html}</td>
         <td align="center" class="crm-phone-is_primary">{$form.phone.$blockId.is_primary.1.html}</td>
index 72f5d7bdf82b3cf37049d1e9a448c2c0fb4ff524..4f9074269e58c15a6459e7932e978132c9507887 100644 (file)
   {include file="CRM/Contact/Form/Edit/Address.tpl" blockId=1}
   <table class="form-layout-compressed">
     <tr>
-      <td><label>{ts}Email 1:{/ts}</label></td>
+      <td>{$form.email.1.email.label}</td>
       <td>{$form.email.1.email.html|crmAddClass:email}</td>
     </tr>
     <tr>
-      <td><label>{ts}Email 2:{/ts}</label></td>
+      <td>{$form.email.2.email.label}</td>
       <td>{$form.email.2.email.html|crmAddClass:email}</td>
     </tr>
     <tr>
-      <td><label>{ts}Phone 1:{/ts}</label></td>
-      <td>{$form.phone.1.phone.html|crmAddClass:phone} {ts context="phone_ext"}ext.{/ts}&nbsp;{$form.phone.1.phone_ext.html|crmAddClass:four}&nbsp;{$form.phone.1.phone_type_id.html}</td>
+      <td>{$form.phone.1.phone.label}</td>
+      <td>{$form.phone.1.phone.html|crmAddClass:phone} {$form.phone.1.phone_ext.label}&nbsp;{$form.phone.1.phone_ext.html|crmAddClass:four}&nbsp;{$form.phone.1.phone_type_id.html}</td>
     </tr>
     <tr>
-      <td><label>{ts}Phone 2:{/ts}</label></td>
-      <td>{$form.phone.2.phone.html|crmAddClass:phone} {ts context="phone_ext"}ext.{/ts}&nbsp;{$form.phone.2.phone_ext.html|crmAddClass:four}&nbsp;{$form.phone.2.phone_type_id.html}</td>
+      <td>{$form.phone.2.phone.label}</td>
+      <td>{$form.phone.2.phone.html|crmAddClass:phone} {$form.phone.2.phone_ext.label}&nbsp;{$form.phone.2.phone_ext.html|crmAddClass:four}&nbsp;{$form.phone.2.phone_type_id.html}</td>
     </tr>
   </table>