Merge pull request #1114 from CruGlobal/accessible-labels-inputs

[no-Jira] Improve ARIA labels and tabbable inputs
CruGlobal · Oct 30, 2024 · e5bb559 · e5bb559
2 parents 3e89c7b + 42885c9
commit e5bb559
Show file tree

Hide file tree

Showing 23 changed files with 339 additions and 250 deletions.
diff --git a/src/app/cart/cart.tpl.html b/src/app/cart/cart.tpl.html
@@ -9,7 +9,7 @@
             <div class="panel-body">
               <div class="row">
                 <div class="col-sm-6">
-                  <h3 class="panel-name" translate>Your Gift Cart</h3>
+                  <h3 id="cart-header" class="panel-name" translate>Your Gift Cart</h3>
                 </div>
                 <div class="col-sm-6 text-right">
                   <loading inline="true" class="text-right" ng-if="$ctrl.updating">
@@ -28,7 +28,7 @@ <h3 class="panel-name" translate>Your Gift Cart</h3>
                 Your cart is empty
               </p>
               <form ng-if="$ctrl.cartData.items.length">
-                <table class="table giftsum-table">
+                <table class="table giftsum-table" aria-labelledby="cart-header">
                   <thead>
                   <tr>
                     <th class="th-title-gift" translate>Gift</th>
@@ -40,7 +40,7 @@ <h3 class="panel-name" translate>Your Gift Cart</h3>
                   <tr class="giftsum-gift-row" ng-repeat="i in $ctrl.cartData.items">
                     <td class="td-gift">
                       <img desig-src="{{i.designationNumber}}" class="giftsum-profile pull-left" width="90" height="51">
-                      <span class="giftsum-person giftsum-title"><a ng-href="/{{i.designationNumber}}">{{i.displayName}}</a></span>
+                      <span id="cart-{{$index}}" class="giftsum-person giftsum-title"><a ng-href="/{{i.designationNumber}}">{{i.displayName}}</a></span>
                       <span class="giftsum-accountnum giftsum-detail">#{{i.designationNumber}}</span>
                     </td>
                     <td class="td-frequency">
@@ -57,9 +57,9 @@ <h3 class="panel-name" translate>Your Gift Cart</h3>
                       <span class="giftsum-detail"><span class=" visible-xs" translate>Gift Amount</span></span>
                     </td>
                     <td class="td-actions giftsum-actions text-sm-right" ng-if="!i.removing">
-                      <a href="" class="btn btn-link btn-giftsum-action" ng-click="$ctrl.editItem(i)" translate>Edit</a>
+                      <a href="" class="btn btn-link btn-giftsum-action" ng-click="$ctrl.editItem(i)" aria-describedby="cart-{{$index}}" translate>Edit</a>
                       <span class="sep"> | </span>
-                      <a href="" class="btn btn-link btn-giftsum-action" ng-click="$ctrl.removeItem(i)" translate>Remove</a>
+                      <a href="" class="btn btn-link btn-giftsum-action" ng-click="$ctrl.removeItem(i)" aria-describedby="cart-{{$index}}" translate>Remove</a>
                       <div class="text-danger" role="alert" ng-if="i.removingError">
                         <span translate>Error removing</span>
                         <span class="hidden-xs hidden-sm" translate>gift</span>

diff --git a/src/app/checkout/cart-summary/cart-summary.tpl.html b/src/app/checkout/cart-summary/cart-summary.tpl.html
@@ -1,7 +1,7 @@
 <div class="panel loading-overlay-parent">
   <div class="panel-body">
-    <h3 class="panel-name" translate>Cart Summary</h3>
-    <table class="table giftsum-table giftsum-table-cart">
+    <h3 id="cart-summary-header" class="panel-name" translate>Cart Summary</h3>
+    <table class="table giftsum-table giftsum-table-cart" aria-labelledby="cart-summary-header">
       <thead>
         <tr>
           <th class="th-title-gift"></th>

diff --git a/src/app/checkout/step-3/step-3.tpl.html b/src/app/checkout/step-3/step-3.tpl.html
@@ -152,13 +152,13 @@
 
   <div class="mb">
     <div class="panel panel-default">
-      <div class="panel-heading">
+      <div id="step3-header" class="panel-heading">
         <translate>{{'REVIEW_GIFTS'}}</translate>
         <button id="changeCartButton" class="btn btn-default btn-panel-head pull-right" ng-click="$ctrl.changeStep({newStep: 'cart'})" translate>{{'CHANGE'}}</button>
       </div>
       <div class="panel-body">
         <loading ng-if="!$ctrl.cartData"></loading>
-        <table class="table giftsum-table" ng-if="$ctrl.cartData">
+        <table class="table giftsum-table" ng-if="$ctrl.cartData" aria-labelledby="step3-header">
           <thead>
           <tr>
             <th class="th-title-gift" translate>{{'GIFT'}}</th>

diff --git a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
@@ -22,13 +22,15 @@
   <div class="tab-content">
     <div class="tab-pane active" ng-if="$ctrl.tab === 'parentDesignation'">
       <div class="form-group">
-        <label>Parent Designation</label>
-        <input name="parentDesignationNumber" type="text" class="form-control" ng-model="$ctrl.parentDesignationNumber">
+        <label>
+          Parent Designation
+          <input name="parentDesignationNumber" type="text" class="form-control" ng-model="$ctrl.parentDesignationNumber">
+        </label>
       </div>
       <div class="form-group">
         <label>Organization ID</label>
         <div><strong>{{$ctrl.organizationId}}</strong></div>
-        <span class="help-block"><strong>Email <a href="mailto:fds@cru.org">fds@cru.org</a> to update/change.</strong></span>
+        <span class="help-block"><strong>Email <a href="mailto:dev.services@cru.org">dev.services@cru.org</a> to update/change.</strong></span>
       </div>
     </div>
 
@@ -62,12 +64,14 @@
 
     <div class="tab-pane active" ng-if="$ctrl.tab === 'other'">
       <div class="form-group">
-        <label>Facebook Pixel ID</label>
-        <input name="facebookPixelId" type="text" class="form-control" ng-model="$ctrl.facebookPixelId">
+        <label>
+          Facebook Pixel ID
+          <input name="facebookPixelId" type="text" class="form-control" ng-model="$ctrl.facebookPixelId">
+        </label>
       </div>
 
 
-      <p>Additional settings can be changed by sending email to <strong><a href="mailto:fds@cru.org">fds@cru.org</a></strong></p>
+      <p>Additional settings can be changed by sending email to <strong><a href="mailto:dev.services@cru.org">dev.services@cru.org</a></strong></p>
 
       <ul>
         <li>Designation Active/Inactive Status</li>

diff --git a/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html b/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html
@@ -76,12 +76,13 @@
         <div class="form-group">
           <label>
             <input type="checkbox"
+                   aria-describedby="newsletter-help"
                    ng-disabled="!$ctrl.hasNewsletter"
                    ng-checked="$ctrl.showNewsletterForm"
                    ng-model="$ctrl.showNewsletterForm"/> Display Newsletter Form?
           </label>
         </div>
-        <div class="form-group">
+        <div id="newsletter-help" class="form-group">
           <h6 ng-if="$ctrl.hasNewsletter">This form will allow donors to subscribe to your MPDX newsletter.</h6>
           <h6 ng-if="!$ctrl.hasNewsletter">This option is disabled because you do not have an MPDX account. To sign up for one, visit <a href="https://mpdx.org" target="_blank">mpdx.org</a>.</h6>
         </div>

diff --git a/src/app/designationEditor/titleModal/titleModal.tpl.html b/src/app/designationEditor/titleModal/titleModal.tpl.html
@@ -1,15 +1,19 @@
 <div class="modal-body">
   <div class="form-group">
-    <label>Receipt Title</label>
-    <input name="receiptTitle" type="text" class="form-control" ng-model="$ctrl.receiptTitle" disabled>
-    <span class="help-block">
-      <strong>Email <a href="mailto:[email protected]">[email protected]</a> to update/change.</strong>
+    <label>
+      Receipt Title
+      <input name="receiptTitle" type="text" class="form-control" aria-describedby="receipt-help" ng-model="$ctrl.receiptTitle" disabled>
+    </label>
+    <span id="receipt-help" class="help-block">
+      <strong>Email <a href="mailto:[email protected]">[email protected]</a> to update/change.</strong>
     </span>
   </div>
 
   <div class="form-group">
-    <label translate>Give.Cru.org Title</label>
-    <input name="giveTitle" type="text" class="form-control" ng-model="$ctrl.giveTitle">
+    <label>
+      <span translate>Give.Cru.org Title</span>
+      <input name="giveTitle" type="text" class="form-control" ng-model="$ctrl.giveTitle">
+    </label>
   </div>
 </div>
 <div class="modal-footer">

diff --git a/src/app/designationEditor/websiteModal/websiteModal.tpl.html b/src/app/designationEditor/websiteModal/websiteModal.tpl.html
@@ -1,8 +1,10 @@
 <div class="modal-body">
   <div class="form-group">
-    <label>Website Address</label>
-    <input name="website" type="text" class="form-control" placeholder="http://" ng-model="$ctrl.website">
-    <span class="help-block">Fill in this field to add a website link.</span>
+    <label>
+      Website Address
+      <input name="website" type="text" class="form-control" placeholder="https://" aria-describedby="website-help" ng-model="$ctrl.website">
+    </label>
+    <span id="website-help" class="help-block">Fill in this field to add a website link.</span>
   </div>
 </div>
 <div class="modal-footer">

diff --git a/src/app/productConfig/productConfig.component.js b/src/app/productConfig/productConfig.component.js
@@ -46,6 +46,7 @@ export default angular
       campaignCode: '@',
       campaignPage: '@',
       productCode: '@',
+      describedBy: '@',
       buttonLabel: '@',
       buttonSize: '@'
     }

diff --git a/src/app/productConfig/productConfig.tpl.html b/src/app/productConfig/productConfig.tpl.html
@@ -1,3 +1,3 @@
-<button class="btn btn-primary btn-{{$ctrl.buttonSize}}" ng-click="$ctrl.configModal()">
+<button class="btn btn-primary btn-{{$ctrl.buttonSize}}" ng-click="$ctrl.configModal()" aria-describedby="{{$ctrl.describedBy}}">
   {{$ctrl.buttonLabel}}
 </button>
diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -1,7 +1,7 @@
 <form novalidate name="$ctrl.itemConfigForm" ng-submit="$ctrl.saveGiftToCart()">
   <div class="row">
     <div class="col-sm-6">
-      <h4 class="give-gift-header" translate>
+      <h4 id="product-config-header" class="give-gift-header" translate>
         {{'GIVE_GIFT_HEADER'}}
       </h4>
     </div>
@@ -180,26 +180,26 @@ <h4 class="panel-title border-bottom-small mt0 pt-" translate>
           <div class="row">
             <div class="col-sm-3">
               <div class="form-group">
-                <label translate>{{'MONTH'}}</label>
-                <div class="form-group">
+                <label>
+                  <span translate>{{'MONTH'}}</span>
                   <select class="form-control form-control-subtle"
                           ng-model="$ctrl.itemConfig['RECURRING_START_MONTH']"
                           ng-options="(m | date:'MM') as (m | date:'MMMM, yyyy') for m in $ctrl.possibleTransactionMonths($ctrl.nextDrawDate)"
                           ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
                   </select>
-                </div>
+                </label>
               </div>
             </div>
             <div class="col-sm-2">
               <div class="form-group">
-                <label translate>{{'DAY'}}</label>
-                <div class="form-group">
+                <label>
+                  <span translate>{{'DAY'}}</span>
                   <select class="form-control form-control-subtle"
                           ng-model="$ctrl.itemConfig['RECURRING_DAY_OF_MONTH']"
                           ng-options="o as (o | ordinal) for o in $ctrl.possibleTransactionDays($ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate)"
                           ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
                   </select>
-                </div>
+                </label>
               </div>
             </div>
             <div class="col-sm-4">
@@ -227,12 +227,13 @@ <h4 class="panel-title border-bottom-small mt" translate>
                     tabindex="-1"
                     ng-click="$ctrl.showRecipientComments = !$ctrl.showRecipientComments"
                     translate='SEND_MESSAGE_TO'
-            translate-values="{ministry: $ctrl.productData.displayName}">
+                    translate-values="{ministry: $ctrl.productData.displayName}">
             </button>
             <textarea class="staff-comments give-modal-comments"
                       name="recipientComments"
                       rows="3"
                       maxlength="250"
+                      aria-labelledby="sendMessageButton"
                       ng-model="$ctrl.itemConfig.RECIPIENT_COMMENTS"
                       ng-if="$ctrl.showRecipientComments"
                       tabindex="-1"
@@ -251,6 +252,7 @@ <h4 class="panel-title border-bottom-small mt" translate>
                       name="donationServicesComments"
                       rows="3"
                       maxlength="250"
+                      aria-labelledby="sendHandlingButton"
                       ng-model="$ctrl.itemConfig.DONATION_SERVICES_COMMENTS"
                       ng-if="$ctrl.showDSComments"
                       tabindex="-1"