From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Thu, 18 May 2023 15:16:58 +0000 (+0000)
Subject: LP1887869 WIP Reduce unnecessary ARIA
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=refs%2Fheads%2Fuser%2Fsleary%2Flp1887869-item-edits-accessibility;p=working%2FEvergreen.git

LP1887869 WIP Reduce unnecessary ARIA

Use <label for="{{inputID}}"> rather than aria-labelledby.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---

diff --git a/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2 b/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
index 10e9c687fa..d63fb133a1 100644
--- a/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
+++ b/Open-ILS/src/templates/staff/cat/volcopy/t_attr_edit.tt2
@@ -178,7 +178,7 @@
       <div class="bg-info"><label id="circLib">[% l('Circulating Library') %]</label></div>
       <div ng-class="{'bg-success': working.circ_lib !== undefined, 'field-changed': field_changed('circ_lib')}">
         <eg-org-selector
-          org-aria="circLib"
+          id="circLib"
           alldisabled="{{!defaults.attributes.circ_lib}}"
           selected="working.circ_lib"
           noDefault
diff --git a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
index 540c0be9e2..13559521d9 100644
--- a/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
+++ b/Open-ILS/src/templates/staff/circ/patron/t_edit.tt2
@@ -98,7 +98,7 @@
 MACRO draw_field_label (cls, field, label_override) BLOCK %]
   <div class="col-md-3 reg-field-label"> <!-- field label -->
     [% IF label_override %]<label>[% label_override %]</label>
-    [% ELSE %]<label id="{{idl_fields.[% cls %].[% field %].name}}">{{idl_fields.[% cls %].[% field %].label}}</label>[% END %]
+    [% ELSE %]<label for="{{idl_fields.[% cls %].[% field %].name}}">{{idl_fields.[% cls %].[% field %].label}}</label>[% END %]
     <!-- field documentation img/link -->
     <img ng-show="field_doc.[% cls %].[% field %]" 
       ng-click="set_selected_field_doc('[% cls %]','[% field %]')"
@@ -122,7 +122,7 @@ MACRO draw_form_input(cls, field, path, type, disable) BLOCK;
       [% END %]
       class="form-control" 
       name="[% model %]"
-      aria-labelledby="{{idl_fields.[% cls %].[% field %].name}}"
+      id="{{idl_fields.[% cls %].[% field %].name}}"
       ng-change="field_modified()" 
       ng-required="field_required('[% cls %]', '[% field %]')"
       ng-blur="handle_field_changed([% base_obj %], '[% field %]')"
@@ -168,7 +168,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input"> <!-- field form input -->
       <input type="text" 
         name="barcode"
-        aria-labelledby="{{idl_fields.ac.barcode.name}}"
+        id="{{idl_fields.ac.barcode.name}}"
         ng-model="patron.card.barcode"
         ng-pattern="field_pattern('ac', 'barcode')"
         ng-required="field_required('ac', 'barcode')"
@@ -196,7 +196,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <input type="text" 
       name='usrname'
-      aria-labelledby="{{idl_fields.au.usrname.name}}"
+      id="{{idl_fields.au.usrname.name}}"
       ng-required="field_required('au', 'usrname')"
       focus-me="focus_usrname"
       ng-change="field_modified()" 
@@ -355,7 +355,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <textarea 
       class="form-control" 
-      aria-labelledby="{{idl_fields.au.name_keywords.name}}"
+      id="{{idl_fields.au.name_keywords.name}}"
       ng-model="patron.name_keywords"
       ng-pattern="field_pattern('au', 'name_keywords')"
       ng-change="field_modified()" 
@@ -383,7 +383,7 @@ within the "form" by name for validation.
   [% draw_field_label('au', 'dob') %]
   <div class="col-md-3 reg-field-input">
     <eg-date-input
-      date-aria="{{idl_fields.au.dob.name}}"
+      id="{{idl_fields.au.dob.name}}"
       ng-required="field_required('au', 'dob')" 
       ng-model="patron.dob">
     </eg-date-input>
@@ -399,7 +399,7 @@ within the "form" by name for validation.
   [% draw_field_label('au', 'juvenile') %]
   <div class="col-md-3 reg-field-input">
       <input 
-        aria-labelledby="{{idl_fields.au.juvenile.name}}"
+        id="{{idl_fields.au.juvenile.name}}"
         ng-change="field_modified()" 
         ng-blur="handle_field_changed(patron, 'juvenile')"
         type='checkbox' ng-model="patron.juvenile"/>
@@ -423,7 +423,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <select 
       class="form-control" 
-      aria-labelledby="{{idl_fields.au.ident_type.name}}"
+      id="{{idl_fields.au.ident_type.name}}"
       ng-model="patron.ident_type"
       ng-required="field_required('au', 'ident_type')"
       ng-blur="handle_field_changed(patron, 'ident_type')"
@@ -449,7 +449,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <select 
       class="form-control" 
-      aria-labelledby="{{idl_fields.au.ident_type2.name}}"
+      id="{{idl_fields.au.ident_type2.name}}"
       ng-model="patron.ident_type2"
       ng-required="field_required('au', 'ident_type2')"
       ng-blur="handle_field_changed(patron, 'ident_type2')"
@@ -485,7 +485,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <select
       class="form-control"
-      aria-labelledby="{{idl_fields.au.locale.name}}"
+      id="{{idl_fields.au.locale.name}}"
       ng-model="patron.locale"
       ng-blur="handle_field_changed(patron, 'locale')"
       ng-options="loc.name() for loc in locales track by loc.code()">
@@ -513,11 +513,11 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row" ng-show="show_field('au.email') && opt_in_setting_types['circ.send_email_checkout_receipts']">
   <div class="col-md-3 reg-field-label">
-    <label id="checkoutReceipts">{{opt_in_setting_types['circ.send_email_checkout_receipts'].label()}}</label>
+    <label for="checkoutReceipts">{{opt_in_setting_types['circ.send_email_checkout_receipts'].label()}}</label>
   </div>
   <div class="col-md-3 reg-field-input">
     <input
-      aria-labelledby="checkoutReceipts"
+      id="checkoutReceipts"
       ng-change="field_modified()"
       type='checkbox' ng-model="user_settings['circ.send_email_checkout_receipts']"/>
   </div>
@@ -598,7 +598,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <div class="btn-group" uib-dropdown>
       <button type="button" class="btn btn-default" uib-dropdown-toggle
-          aria-labelledby="{{idl_fields.au.profile.name}}"
+          id="{{idl_fields.au.profile.name}}"
           ng-class="{'ng-invalid' : invalid_profile()}">
         <span style="padding-right: 5px;">
           {{patron.profile.name() || "[% l('Profile Group') %]"}}
@@ -631,7 +631,7 @@ within the "form" by name for validation.
   [% draw_field_label('au', 'expire_date') %]
   <div class="col-md-3 reg-field-input">
     <eg-date-input
-      date-aria="{{idl_fields.au.expire_date.name}}"
+      id="{{idl_fields.au.expire_date.name}}"
       ng-model="patron.expire_date">
     </eg-date-input>
   </div>
@@ -648,7 +648,7 @@ within the "form" by name for validation.
   <div class="col-md-3 reg-field-input">
     <select 
       class="form-control" 
-      aria-labelledby="{{idl_fields.au.net_access_level.name}}"
+      id="{{idl_fields.au.net_access_level.name}}"
       ng-model="patron.net_access_level"
       ng-required="field_required('au', 'net_access_level')"
       ng-blur="handle_field_changed(patron, 'net_access_level')"
@@ -663,7 +663,7 @@ within the "form" by name for validation.
   [% draw_field_label('au', 'active') %]
   <div class="col-md-3 reg-field-input">
       <input 
-        aria-labelledby="{{idl_fields.au.active.name}}"
+        id="{{idl_fields.au.active.name}}"
         ng-change="field_modified()" 
         ng-blur="handle_field_changed(patron, 'active')"
         type='checkbox' ng-model="patron.active"/>
@@ -676,7 +676,7 @@ within the "form" by name for validation.
   [% draw_field_label('au', 'barred') %]
   <div class="col-md-3 reg-field-input">
       <input 
-        aria-labelledby="{{idl_fields.au.barred.name}}"
+        id="{{idl_fields.au.barred.name}}"
         ng-change="field_modified()" 
         ng-blur="handle_field_changed(patron, 'barred')"
         type='checkbox' ng-model="patron.barred"/>
@@ -689,7 +689,7 @@ within the "form" by name for validation.
   [% draw_field_label('au', 'master_account') %]
   <div class="col-md-3 reg-field-input">
       <input 
-        aria-labelledby="{{idl_fields.au.master_account.name}}"
+        id="{{idl_fields.au.master_account.name}}"
         ng-change="field_modified()" 
         ng-blur="handle_field_changed(patron, 'master_account')"
         type='checkbox' ng-model="patron.master_account"/>
@@ -726,11 +726,11 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row">
   <div class="col-md-3 reg-field-label">
-    <label id="defaultPhone">{{user_setting_types['opac.default_phone'].label()}}</label>
+    <label for="defaultPhone">{{user_setting_types['opac.default_phone'].label()}}</label>
   </div>
   <div class="col-md-3 reg-field-input">
     <input ng-required="hold_notify_type.phone"
-      aria-labelledby="defaultPhone"
+      id="defaultPhone"
       ng-change="field_modified()" 
       ng-blur="handle_field_changed(user_settings, 'opac.default_phone')"
       type='text' ng-model="user_settings['opac.default_phone']"/>
@@ -739,13 +739,13 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row">
   <div class="col-md-3 reg-field-label">
-    <label id="defaultPickupLoc">
+    <label for="defaultPickupLoc">
       {{user_setting_types['opac.default_pickup_location'].label()}}
     </label>
   </div>
   <div class="col-md-3 reg-field-input">
     <eg-org-selector nodefault
-      org-aria="defaultPickupLoc"
+      id="defaultPickupLoc"
       disable-test="disable_pulib" 
       selected="patron._pickup_lib"
       onchange="handle_pulib_changed">
@@ -756,13 +756,13 @@ within the "form" by name for validation.
 <div class="row reg-field-row" 
     ng-if="org_settings['circ.holds.behind_desk_pickup_supported']">
   <div class="col-md-3 reg-field-label">
-    <label id="holdsBehindDesk">
+    <label for="holdsBehindDesk">
       {{user_setting_types['circ.holds_behind_desk'].label()}}
     </label>
   </div>
   <div class="col-md-3 reg-field-input">
       <input 
-        aria-labelledby="holdsBehindDesk"
+        id="holdsBehindDesk"
         ng-change="field_modified()" 
         type='checkbox' ng-model="user_settings['circ.holds_behind_desk']"/>
   </div>
@@ -771,14 +771,14 @@ within the "form" by name for validation.
 <div class="row reg-field-row" 
   ng-if="user_setting_types['circ.collections.exempt']">
   <div class="col-md-3 reg-field-label">
-    <label id="exempt">
+    <label for="exempt">
       {{user_setting_types['circ.collections.exempt'].label()}}
     </label>
   </div>
   <div class="col-md-3 reg-field-input">
       <input 
         type='checkbox' 
-        aria-labelledby="exempt"
+        id="exempt"
         ng-change="field_modified()" 
         ng-disabled="!perms.UPDATE_PATRON_COLLECTIONS_EXEMPT"
         ng-model="user_settings['circ.collections.exempt']"/>
@@ -787,33 +787,33 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row">
   <div class="col-md-3 reg-field-label">
-    <label id="holdsNotices">[% l('Holds Notices') %]</label>
+    <label for="holdsNotices">[% l('Holds Notices') %]</label>
   </div>
   <div class="col-md-4 reg-field-input flex-row">
     <div class='flex-cell'>
       <input 
-        aria-labelledby="holdsNotices holdsPhone"
+        id="holdsNotices holdsPhone"
         ng-change="field_modified()"
         type='checkbox' ng-model="hold_notify_type.phone"/>
-      <label id="holdsPhone">
+      <label for="holdsPhone">
         [% l('Phone') %]
       </label>
     </div>
     <div class='flex-cell'>
       <input 
-        aria-labelledby="holdsNotices holdsEmail"
+        id="holdsNotices holdsEmail"
         ng-change="field_modified()" 
         type='checkbox' ng-model="hold_notify_type.email"/>
-      <label id="holdsEmail">
+      <label for="holdsEmail">
         [% l('Email') %]
       </label>
     </div>
     <div class='flex-cell' ng-if="org_settings['sms.enable']">
       <input 
-        aria-labelledby="holdsNotices holdsSms"
+        id="holdsNotices holdsSms"
         ng-change="field_modified()" 
         type='checkbox' ng-model="hold_notify_type.sms"/>
-      <label id="holdsSms">
+      <label for="holdsSms">
         [% l('SMS') %]
       </label>
     </div>
@@ -822,12 +822,12 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row" ng-if="org_settings['sms.enable']">
   <div class="col-md-3 reg-field-label">
-    <label id="defaultSmsNum">[% l('Default SMS/Text Number') %]</label>
+    <label for="defaultSmsNum">[% l('Default SMS/Text Number') %]</label>
   </div>
   <div class="col-md-3 reg-field-input">
     <input 
       name="default_sms_text_number"
-      aria-labelledby="defaultSmsNum"
+      id="defaultSmsNum"
       ng-required="hold_notify_type.sms"
       ng-change="field_modified()" ng-model="user_settings['opac.default_sms_notify']"
       ng-blur="handle_field_changed(user_settings, 'opac.default_sms_notify')"
@@ -842,7 +842,7 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row" ng-if="org_settings['sms.enable']">
   <div class="col-md-3 reg-field-label">
-    <label id="defaultSmsCarrier">
+    <label for="defaultSmsCarrier">
       [% l('Default SMS Carrier') %]
     </label>
   </div>
@@ -850,7 +850,7 @@ within the "form" by name for validation.
     <span class="nullable">
       <select str-to-int
         class="form-control" 
-        aria-labelledby="defaultSmsCarrier"
+        id="defaultSmsCarrier"
         name="default_sms_text_carrier"
         ng-model="user_settings['opac.default_sms_carrier']"
         ng-required="user_settings['opac.default_sms_notify']"
@@ -864,11 +864,11 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row" ng-repeat="type in opt_in_setting_types">
   <div class="col-md-3 reg-field-label" ng-if="type.name() != 'circ.send_email_checkout_receipts'">
-    <label id="settingTypes">{{type.label()}}</label>
+    <label for="settingTypes">{{type.label()}}</label>
   </div>
   <div class="col-md-3 reg-field-input" ng-if="type.name() != 'circ.send_email_checkout_receipts'">
     <input 
-      aria-labelledby="settingTypes"
+      id="settingTypes"
       ng-change="field_modified()" 
       type='checkbox' ng-model="user_settings[type.name()]"/>
   </div>
@@ -876,17 +876,17 @@ within the "form" by name for validation.
 
 <div class="row reg-field-row" ng-if="org_settings['circ.privacy_waiver']">
   <div class="col-md-3 reg-field-label">
-    <label id="privacyWaiver">[% l('Allow others to use my account') %]</label>
+    <label for="privacyWaiver">[% l('Allow others to use my account') %]</label>
   </div>
   <div class="col-md-4 reg-field-input">
     <div class="row" ng-repeat="waiver_entry in patron.waiver_entries" ng-hide="waiver_entry.isdeleted">
       <div class="row flex-row">
         <div class="flex-cell">
-          <label id="waiverName" ng-hide="true">
+          <label for="waiverName" ng-hide="true">
             [% l('Name') %]
           </label>
           <input ng-change="field_modified()"
-            aria-labelledby="privacyWaiver waiverName"
+            id="waiverName"
             type='text' ng-model="waiver_entry.name"/>
         </div>
         <div class="flex-cell">
@@ -898,26 +898,26 @@ within the "form" by name for validation.
       </div>
       <div class="row flex-row reg-field-input">
         <div class="flex-cell">
-          <label id="waiverPlace"><input ng-change="field_modified()"
-            aria-labelledby="privacyWaiver waiverPlace"
+          <label for="waiverPlace"><input ng-change="field_modified()"
+            id="waiverPlace"
             type='checkbox' ng-model="waiver_entry.place_holds"/>
             [% l('Place Holds?') %]</label>
         </div>
         <div class="flex-cell">
-          <label id="waiverPickup"><input ng-change="field_modified()"
-            aria-labelledby="privacyWaiver waiverPickup"
+          <label for="waiverPickup"><input ng-change="field_modified()"
+            id="waiverPickup"
             type='checkbox' ng-model="waiver_entry.pickup_holds"/>
             [% l('Pick Up Holds?') %]</label>
         </div>
         <div class="flex-cell">
-          <label id="waiverHistory"><input ng-change="field_modified()"
-            aria-labelledby="privacyWaiver waiverHistory"
+          <label for="waiverHistory"><input ng-change="field_modified()"
+            id="waiverHistory"
             type='checkbox' ng-model="waiver_entry.view_history"/>
             [% l('View Borrowing History?') %]</label>
         </div>
         <div class="flex-cell">
-          <label id="waiverCheckOut"><input ng-change="field_modified()"
-            aria-labelledby="privacyWaiver waiverCheckOut"
+          <label for="waiverCheckOut"><input ng-change="field_modified()"
+            id="waiverCheckOut"
             type='checkbox' ng-model="waiver_entry.checkout_items"/>
             [% l('Check Out Items?') %]</label>
         </div>
@@ -940,7 +940,7 @@ within the "form" by name for validation.
 <div ng-repeat="addr in patron.addresses">
   <div class="alert alert-success row" role="alert">
     <div class="col-md-3">
-      <label id="address{{addr.id}}">
+      <label for="address{{addr.id}}">
         [% l('Address') %]
       </label>
       <div ng-show="addr._linked_owner">
@@ -952,20 +952,20 @@ within the "form" by name for validation.
     </div>
     <div class="col-md-3">
         <span class='pad-all-min'>
-          <label id="mailing{{addr.id}}">
+          <label for="mailing{{addr.id}}">
             [% l('Mailing') %]
           </label>
           <input type='checkbox' 
-            aria-labelledby="address{{addr.id}} mailing{{addr.id}}"
+            id="mailing{{addr.id}}"
             ng-change="field_modified();set_addr_type(addr, 'mailing')" 
             ng-model="addr._is_mailing"/>
         </span>
         <span class='pad-all-min'>
-          <label id="physical{{addr.id}}">
+          <label for="physical{{addr.id}}">
             [% l('Physical') %]
           </label>
            <input type='checkbox' 
-            aria-labelledby="address{{addr.id}} physical{{addr.id}}"
+            id="physical{{addr.id}}"
             ng-change="field_modified();set_addr_type(addr, 'billing')" 
             ng-model="addr._is_billing"/>
         </span>
@@ -1100,7 +1100,7 @@ within the "form" by name for validation.
     [% draw_field_label('aua', 'valid') %]
     <div class="col-md-3 reg-field-input">
         <input 
-          aria-labelledby="{{idl_fields.aua.valid.name}}"
+          id="{{idl_fields.aua.valid.name}}"
           type='checkbox' 
           ng-change="field_modified()" 
           ng-disabled='addr._linked_owner'
@@ -1119,7 +1119,7 @@ within the "form" by name for validation.
     <div class="col-md-3 reg-field-input">
         <input 
           type='checkbox'
-          aria-labelledby="{{idl_fields.aua.within_city_limits.name}}"
+          id="{{idl_fields.aua.within_city_limits.name}}"
           ng-change="field_modified()" 
           ng-disabled='addr._linked_owner'
           ng-blur="handle_field_changed(patron.addresses[$index], 'within_city_limits')"
@@ -1153,13 +1153,13 @@ within the "form" by name for validation.
   <div ng-if="show_field('stat_cats') || cat.required() == 1">
 
     <div class="col-md-3 reg-field-label">
-      <label id="statcat{{cat.id()}}">{{cat.name()}}</label>
+      <label for="statcat{{cat.id()}}">{{cat.name()}}</label>
     </div>
     <div class="col-md-3 reg-field-input">
       <div ng-if="cat.entries().length != 0">
         <div class="btn-group" uib-dropdown>
           <button type="button" class="btn btn-default" 
-            aria-labelledby="statcat{{cat.id()}}"
+            id="statcat{{cat.id()}}"
             ng-class="{'ng-invalid': cat.required() == 1 && !stat_cat_entry_maps[cat.id()] }" 
             uib-dropdown-toggle>
             <span style="padding-right: 5px;">
@@ -1184,7 +1184,7 @@ within the "form" by name for validation.
       ng-show="show_field('stat_cats') || hasRequiredStatCat"
       ng-if="cat.allow_freetext() == '1'">
       <input type="text" 
-        aria-labelledby="statcat{{cat.id()}}"
+        id="statcat{{cat.id()}}"
         ng-model="stat_cat_entry_maps[cat.id()]"
         class="form-control" ng-required="cat.required() == 1"/>
     </div>
diff --git a/Open-ILS/src/templates/staff/share/t_patron_search_form.tt2 b/Open-ILS/src/templates/staff/share/t_patron_search_form.tt2
index 2152cab70c..1d67f67ec3 100644
--- a/Open-ILS/src/templates/staff/share/t_patron_search_form.tt2
+++ b/Open-ILS/src/templates/staff/share/t_patron_search_form.tt2
@@ -141,7 +141,7 @@
         </div>
 
         <div class="col-md-2">
-          <eg-org-selector label="[% l('Home Library') %]" org-aria="[% l('Home Library') %]"
+          <eg-org-selector label="[% l('Home Library') %]" id="home_ou"
             selected="searchArgs.home_ou" sticky-setting="eg.circ.patron.search.ou">
           </eg-org-selector>
         </div>