From bbd7d7251942547582df13452a8b5801722795ad Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:07:22 -0500
Subject: [PATCH 1/8] Add label to session modal

---
 src/common/services/session/sessionModal.service.js | 1 +
 src/common/services/session/sessionModal.tpl.html   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/services/session/sessionModal.service.js b/src/common/services/session/sessionModal.service.js
index ef8315761..e7843a3fc 100644
--- a/src/common/services/session/sessionModal.service.js
+++ b/src/common/services/session/sessionModal.service.js
@@ -27,6 +27,7 @@ const SessionModalService = /* @ngInject */ function ($uibModal, $log, modalStat
       component: sessionModalComponent.name,
       size: 'sm',
       windowTemplateUrl: sessionModalWindowTemplate,
+      ariaLabelledBy: 'session-modal-title',
       resolve: {
         state: () => type
       }
diff --git a/src/common/services/session/sessionModal.tpl.html b/src/common/services/session/sessionModal.tpl.html
index 8b85f11c4..94ae05fc6 100644
--- a/src/common/services/session/sessionModal.tpl.html
+++ b/src/common/services/session/sessionModal.tpl.html
@@ -6,7 +6,7 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-xs-12">
-          <div class="border-bottom-small">
+          <div id="session-modal-title" class="border-bottom-small">
             <h3 class="text-center">{{$ctrl.modalTitle | translate}}</h3>
           </div>
         </div>

From e817670db847aa7fb87db2c71f0b2f12cd942544 Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Fri, 25 Oct 2024 15:32:56 -0500
Subject: [PATCH 2/8] Add context to Give a Gift buttons in search results

---
 src/app/productConfig/productConfig.component.js | 1 +
 src/app/productConfig/productConfig.tpl.html     | 2 +-
 src/app/searchResults/searchResults.tpl.html     | 6 +++---
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/productConfig/productConfig.component.js b/src/app/productConfig/productConfig.component.js
index 8441782ef..43945190b 100644
--- 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
index 95a1882ee..574699db6 100644
--- 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/searchResults/searchResults.tpl.html b/src/app/searchResults/searchResults.tpl.html
index 55dc0b209..41d171e28 100644
--- a/src/app/searchResults/searchResults.tpl.html
+++ b/src/app/searchResults/searchResults.tpl.html
@@ -129,14 +129,14 @@ <h4 class="is-results-divider" ng-if="facet === 'featured' && $ctrl.featuredGrou
                     </a>
                     <div class="is-row-meta">
                       <a ng-href="{{$ctrl.buildVanity(r.path)}}">
-                        <span class="is-row-title">{{r.name}}</span>
+                        <span id="result-{{$index}}" class="is-row-title">{{r.name}}</span>
                         <span class="is-row-num">#{{r.designationNumber}}</span>
                       </a>
                     </div>
                     <div class="is-row-actions hidden-xs">
-                      <product-config product-code="{{r.designationNumber}}" campaign-page="{{r.campaignPage}}" button-label="Give a Gift" button-size="sm"></product-config>
+                      <product-config product-code="{{r.designationNumber}}" campaign-page="{{r.campaignPage}}" described-by="result-{{$index}}" button-label="Give a Gift" button-size="sm"></product-config>
                       &nbsp;
-                      <a ng-href="{{$ctrl.buildVanity(r.path)}}" class="btn btn-sm btn-subtle" ng-click="$ctrl.productViewDetailsAnalyticsEvent(r)" translate>Details</a>
+                      <a ng-href="{{$ctrl.buildVanity(r.path)}}" class="btn btn-sm btn-subtle" ng-click="$ctrl.productViewDetailsAnalyticsEvent(r)" aria-describedby="result-{{$index}}" translate>Details</a>
                     </div>
                   </div>
                 </div>

From f307e2a5c338f0a6e4d3556fca1c3714498398ee Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:03:39 -0500
Subject: [PATCH 3/8] Add labels to product config month, day, and textareas

---
 .../productConfigForm/productConfigForm.tpl.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
index 41b705b36..29485f301 100644
--- a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
+++ b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -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"

From e7a7f851a77c27df158d88837189cccc2bb451f0 Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:09:07 -0500
Subject: [PATCH 4/8] Add product config modal label

---
 .../productConfig/productConfigForm/productConfigForm.tpl.html  | 2 +-
 src/common/services/productModal.service.js                     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
index 29485f301..583baab35 100644
--- 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>
diff --git a/src/common/services/productModal.service.js b/src/common/services/productModal.service.js
index 07f0fec33..6062bfc7b 100644
--- a/src/common/services/productModal.service.js
+++ b/src/common/services/productModal.service.js
@@ -24,6 +24,7 @@ class ProductModalService {
         component: productConfigModal.name,
         size: 'lg',
         windowTemplateUrl: giveModalWindowTemplate,
+        ariaLabelledBy: 'product-config-header',
         resolve: {
           code: () => code,
           itemConfig: () => itemConfig,

From d2005642b55df7a3ccf7b9886035d9054851a8ac Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:26:05 -0500
Subject: [PATCH 5/8] Add labels to cart tables

---
 src/app/cart/cart.tpl.html                          | 4 ++--
 src/app/checkout/cart-summary/cart-summary.tpl.html | 4 ++--
 src/app/checkout/step-3/step-3.tpl.html             | 4 ++--
 src/app/thankYou/summary/thankYouSummary.tpl.html   | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/cart/cart.tpl.html b/src/app/cart/cart.tpl.html
index 3ed10cbc8..86f0fcfec 100644
--- 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>
diff --git a/src/app/checkout/cart-summary/cart-summary.tpl.html b/src/app/checkout/cart-summary/cart-summary.tpl.html
index 561dbd5cc..0c1d3b086 100644
--- 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
index a6c067b33..6e62128de 100644
--- 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/thankYou/summary/thankYouSummary.tpl.html b/src/app/thankYou/summary/thankYouSummary.tpl.html
index 573310298..e490d75b8 100644
--- a/src/app/thankYou/summary/thankYouSummary.tpl.html
+++ b/src/app/thankYou/summary/thankYouSummary.tpl.html
@@ -114,9 +114,9 @@ <h2 class="panel-name" translate>
         <div class="col-md-12">
           <div class="panel panel-default">
             <div class="panel-body">
-              <h4 class="panel-name" translate>{{'GIFT_SUMMARY'}}</h4>
+              <h4 id="thank-you-header" class="panel-name" translate>{{'GIFT_SUMMARY'}}</h4>
 
-              <table class="table giftsum-table giftsum-table-cart">
+              <table class="table giftsum-table giftsum-table-cart" aria-labelledby="thank-you-header">
                 <tbody>
                 <tr class="giftsum-gift-row" ng-repeat="item in $ctrl.purchase.lineItems" ng-init="$ctrl.loadFacebookPixel(item)">
                   <td class="td-gift">

From c6018fa178569064ff5ceedc30c9fee36f58e47e Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:26:12 -0500
Subject: [PATCH 6/8] Add context to cart actions

---
 src/app/cart/cart.tpl.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/cart/cart.tpl.html b/src/app/cart/cart.tpl.html
index 86f0fcfec..c131d9dd3 100644
--- a/src/app/cart/cart.tpl.html
+++ b/src/app/cart/cart.tpl.html
@@ -40,7 +40,7 @@ <h3 id="cart-header" 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 id="cart-header" 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>

From 4cb7b2b8e04dff342fe6a857fe4c3a4acbf9ed29 Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Mon, 28 Oct 2024 11:20:01 -0500
Subject: [PATCH 7/8] Add labels to form inputs

---
 .../pageOptionsModal.tpl.html                 |  12 +-
 .../personalOptionsModal.tpl.html             |   3 +-
 .../titleModal/titleModal.tpl.html            |  14 +-
 .../websiteModal/websiteModal.tpl.html        |   8 +-
 src/app/profile/profile.tpl.html              |  65 +++++----
 .../crubrand/bootstrap-variations/_forms.scss |   6 +-
 src/assets/scss/_form.scss                    |  26 ++--
 src/assets/scss/_gift-config.scss             |   4 +
 .../addressForm/addressForm.tpl.html          |  92 +++++++-----
 .../contactInfo/contactInfo.tpl.html          | 134 ++++++++++--------
 .../bankAccountForm/bankAccountForm.tpl.html  |  52 ++++---
 .../creditCardForm/creditCardForm.tpl.html    | 114 ++++++++-------
 12 files changed, 307 insertions(+), 223 deletions(-)

diff --git a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
index dd89a66d1..dde02061a 100644
--- a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
+++ b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
@@ -22,8 +22,10 @@
   <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>
@@ -62,8 +64,10 @@
 
     <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>
 
 
diff --git a/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html b/src/app/designationEditor/personalOptionsModal/personalOptionsModal.tpl.html
index c69e8d68a..27c18bf66 100644
--- 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
index e9970f145..b4974008b 100644
--- 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">
+    <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:fds@cru.org">fds@cru.org</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
index 8958332a7..5f0a05efa 100644
--- 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/profile/profile.tpl.html b/src/app/profile/profile.tpl.html
index a0dc624ed..d61d375da 100644
--- a/src/app/profile/profile.tpl.html
+++ b/src/app/profile/profile.tpl.html
@@ -39,7 +39,7 @@ <h2 class="mb_x" translate>Your Profile</h2>
                   <div class="col-md-7 mb">
 
                     <!--Donor Details-->
-                    <h4 class="panel-title  border-bottom-small visible" translate>Your Name</h4>
+                    <h4 id="name-heading" class="panel-title  border-bottom-small visible" translate>Your Name</h4>
                     <div class="loading-overlay-parent">
                       <loading type="overlay" ng-if="$ctrl.donorDetailsLoading"></loading>
                       <ul class="list-unstyled people-fields">
@@ -50,15 +50,16 @@ <h4 class="panel-title  border-bottom-small visible" translate>Your Name</h4>
 
                               <select name="nameTitle"
                                       class="form-control form-control-subtle prefix"
+                                      aria-label="Your name title"
                                       ng-model="$ctrl.donorDetails.name.title"
                                       ng-options="value as label for (value , label) in $ctrl.availableTitles">
                               </select>
 
-                              <input name="nameGivenName" type="text" class="form-control  form-control-subtle first" disabled ng-model="$ctrl.donorDetails.name['given-name']">
-                              <input name="nameMiddleInitial" type="text" class="form-control  form-control-subtle middle" ng-model="$ctrl.donorDetails.name['middle-initial']" ng-maxlength="15">
-                              <input name="nameFamilyName" type="text" class="form-control  form-control-subtle last" disabled ng-model="$ctrl.donorDetails.name['family-name']">
+                              <input name="nameGivenName" type="text" class="form-control  form-control-subtle first" disabled aria-label="Your given name" ng-model="$ctrl.donorDetails.name['given-name']">
+                              <input name="nameMiddleInitial" type="text" class="form-control  form-control-subtle middle" aria-label="Your middle initial" ng-model="$ctrl.donorDetails.name['middle-initial']" ng-maxlength="15">
+                              <input name="nameFamilyName" type="text" class="form-control  form-control-subtle last" disabled  aria-label="Your family name" ng-model="$ctrl.donorDetails.name['family-name']">
 
-                              <select name="nameSuffix" class="form-control form-control-subtle suffix" ng-model="$ctrl.donorDetails.name.suffix">
+                              <select name="nameSuffix" class="form-control form-control-subtle suffix" aria-label="Your name suffix" ng-model="$ctrl.donorDetails.name.suffix">
                                 <option value=""></option>
                                 <option value="Jr." translate>Jr</option>
                                 <option value="Sr." translate>Sr</option>
@@ -85,15 +86,16 @@ <h4 class="panel-title  border-bottom-small visible" translate>Your Name</h4>
                               <i class="fa fa-lock"></i>
                               <select name="title"
                                       class="form-control form-control-subtle prefix"
+                                      aria-label="Spouse's name title"
                                       ng-model="$ctrl.donorDetails['spouse-name'].title"
                                       ng-options="value as label for (value , label) in $ctrl.availableTitles">
                               </select>
 
-                              <input name="spouseName" type="text" class="form-control form-control-subtle first" ng-model="$ctrl.donorDetails['spouse-name']['given-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
-                              <input name="spouseInitial" type="text" class="form-control form-control-subtle middle" ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']" ng-maxlength="15">
-                              <input name="spouseLastName" type="text" class="form-control form-control-subtle last" ng-model="$ctrl.donorDetails['spouse-name']['family-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
+                              <input name="spouseName" type="text" class="form-control form-control-subtle first" aria-label="Spouse's given name" ng-model="$ctrl.donorDetails['spouse-name']['given-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
+                              <input name="spouseInitial" type="text" class="form-control form-control-subtle middle" aria-label="Spouse's middle initial" ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']" ng-maxlength="15">
+                              <input name="spouseLastName" type="text" class="form-control form-control-subtle last" aria-label="Spouse's family name" ng-model="$ctrl.donorDetails['spouse-name']['family-name']" ng-maxlength="50" ng-disabled="$ctrl.hasSpouse" ng-required="$ctrl.addingSpouse">
 
-                              <select name="suffix" class="form-control form-control-subtle suffix" ng-model="$ctrl.donorDetails['spouse-name'].suffix">
+                              <select name="suffix" class="form-control form-control-subtle suffix" aria-label="Spouse's name suffix" ng-model="$ctrl.donorDetails['spouse-name'].suffix">
                                 <option value=""></option>
                                 <option value="Jr." translate>Jr</option>
                                 <option value="Sr." translate>Sr</option>
@@ -144,14 +146,16 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Email Addresse
                       <loading type="overlay" ng-if="$ctrl.emailLoading"></loading>
                       <form name="$ctrl.donorEmailForm" novalidate>
                         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.donorEmailForm.donorsEmail | showErrors)}">
-                          <label>{{$ctrl.donorDetails.name['given-name'] + ' ' + $ctrl.donorDetails.name['family-name']}} Email</label>
-                          <input type="email"
-                                 name="donorsEmail"
-                                 class="form-control  form-control-subtle"
-                                 ng-model="$ctrl.donorEmail.email"
-                                 maxlength="100"
-                                 required
-                                 ng-disabled="$ctrl.donorDetails.staff">
+                          <label>
+                            <span>{{$ctrl.donorDetails.name['given-name'] + ' ' + $ctrl.donorDetails.name['family-name']}} Email</span>
+                            <input type="email"
+                                  name="donorsEmail"
+                                  class="form-control  form-control-subtle"
+                                  ng-model="$ctrl.donorEmail.email"
+                                  maxlength="100"
+                                  required
+                                  ng-disabled="$ctrl.donorDetails.staff">
+                          </label>
                           <div role="alert" ng-messages="$ctrl.donorEmailForm.$error" ng-if="($ctrl.donorEmailForm.donorsEmail | showErrors)">
                             <div class="help-block" ng-message="required" translate>You must enter an email address</div>
                             <div class="help-block" ng-message="email" translate>You must enter a valid email address</div>
@@ -163,15 +167,15 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Email Addresse
 
                       <form name="$ctrl.spouseEmailForm" novalidate ng-if="$ctrl.donorDetails['donor-type'] === 'Household' && ($ctrl.hasSpouse || $ctrl.addingSpouse)">
                         <div class="form-group" ng-class="{'has-error': ($ctrl.spouseEmailForm.spouseEmail | showErrors)}">
-                          <label translate>
-                            {{$ctrl.hasSpouse ? ($ctrl.donorDetails['spouse-name']['given-name'] + ' ' + $ctrl.donorDetails['spouse-name']['family-name']) : 'Spouse'}} Email
+                          <label>
+                            <span translate>{{$ctrl.hasSpouse ? ($ctrl.donorDetails['spouse-name']['given-name'] + ' ' + $ctrl.donorDetails['spouse-name']['family-name']) : 'Spouse'}} Email</span>
+                            <input type="email"
+                                  name="spouseEmail"
+                                  class="form-control  form-control-subtle"
+                                  ng-model="$ctrl.spouseEmail.email"
+                                  maxlength="100"
+                                  ng-disabled="$ctrl.donorDetails.staff">
                           </label>
-                          <input type="email"
-                                 name="spouseEmail"
-                                 class="form-control  form-control-subtle"
-                                 ng-model="$ctrl.spouseEmail.email"
-                                 maxlength="100"
-                                 ng-disabled="$ctrl.donorDetails.staff">
                           <div role="alert" ng-messages="$ctrl.spouseEmailForm.spouseEmail.$error" ng-if="($ctrl.spouseEmailForm.spouseEmail | showErrors)">
                             <div class="help-block" ng-message="email" translate>You must enter a valid email address</div>
                             <div class="help-block" ng-message="maxlength" translate>This field cannot be longer than 100 characters</div>
@@ -191,6 +195,7 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Phone Numbers<
                           <form name="$ctrl.phoneNumberForms[{{$index}}]" ng-hide="phone.delete" novalidate>
                             <select name="phoneNumberType"
                                     class="form-control form-control-subtle"
+                                    aria-label="Phone number type"
                                     ng-model="phone['phone-number-type']"
                                     ng-disabled="$ctrl.donorDetails.staff">
                               <option translate>Home</option>
@@ -201,18 +206,20 @@ <h4 class="panel-title  border-bottom-small visible mt" translate>Phone Numbers<
                             <input name="phoneNumber"
                                    type="tel"
                                    class="form-control form-control-subtle"
+                                   aria-label="Phone number"
                                    ng-model="phone['phone-number']"
                                    required
                                    ng-disabled="$ctrl.donorDetails.staff">
                             <select name="spousePhoneNumber"
                                     class="form-control form-control-subtle"
+                                    aria-label="Phone number person"
                                     ng-model="phone['is-spouse']"
                                     ng-change="phone.ownerChanged = !phone.ownerChanged"
                                     ng-disabled="!$ctrl.hasSpouse || $ctrl.donorDetails.staff">
                               <option ng-value="true">{{$ctrl.donorDetails['spouse-name']['given-name']}}</option>
                               <option ng-value="false">{{$ctrl.donorDetails.name['given-name']}}</option>
                             </select>
-                            <a id="removeSpousePhoneNumberLink" href="" ng-click="$ctrl.deletePhoneNumber(phone, $index)" ng-if="!$ctrl.donorDetails.staff">
+                            <a id="removeSpousePhoneNumberLink" href="" aria-label="Delete phone number" ng-click="$ctrl.deletePhoneNumber(phone, $index)" ng-if="!$ctrl.donorDetails.staff">
                               <i class="fa fa-minus-circle" aria-hidden="true"></i>
                             </a>
                           </form>
@@ -235,8 +242,10 @@ <h4 class="panel-title  border-bottom-small visible" translate>Your Mailing Addr
                     <div class="row" ng-if="$ctrl.donorDetails['donor-type'] == 'Organization'">
                       <div class="col-sm-12">
                         <div class="form-group">
-                          <label translate>Organization Name</label>
-                          <input type="text" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['organization-name']" disabled>
+                          <label>
+                            <span translate>Organization Name</span>
+                            <input type="text" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['organization-name']" disabled>
+                          </label>
                         </div>
                       </div>
                     </div>
diff --git a/src/assets/crubrand/bootstrap-variations/_forms.scss b/src/assets/crubrand/bootstrap-variations/_forms.scss
index 8c417949c..b88a03828 100644
--- a/src/assets/crubrand/bootstrap-variations/_forms.scss
+++ b/src/assets/crubrand/bootstrap-variations/_forms.scss
@@ -114,6 +114,10 @@ output {
 // input[type="tel"]
 // input[type="color"]
 
+label:has(.form-control) {
+    width: 100%;
+}
+
 .form-control {
   display: block;
   width: 100%;
@@ -442,7 +446,7 @@ input[type="checkbox"] {
         }
 
         // Input groups need that 100% width though
-        .input-group > .form-control {
+        .input-group > label > .form-control {
             width: 100%;
         }
 
diff --git a/src/assets/scss/_form.scss b/src/assets/scss/_form.scss
index 0f2560c33..55f46fbc4 100644
--- a/src/assets/scss/_form.scss
+++ b/src/assets/scss/_form.scss
@@ -3,7 +3,7 @@
   .form-control {
     box-shadow: inset 0px 0px 0px 1px $state-danger-text;
   }
-  label {
+  label > span, label > translate {
     color: $state-danger-text;
     font-weight: 600;
     &:before {
@@ -19,7 +19,7 @@
   .form-control {
     box-shadow: inset 0px 0px 0px 1px $colorHelper-success;
   }
-  label {
+  label > span, label > translate {
     color: $colorHelper-success;
     &:before {
       content: "\f00c";
@@ -30,15 +30,21 @@
   }
 }
 
+label:not(:has(input[type=checkbox])) {
+  & > span, & > translate {
+    display: block;
+    margin-bottom: 4px;
+  }
+}
+
 .is-required {
-  label {
-    &:after {
-      content: "*";
-      display: inline-block;
-      font-size: 115%;
-      font-family: "fontawesome", "Font Awesome 5 Pro";
-      margin-left: 6px;
-    }
+  label > span:after, label > translate:after {
+    content: "*";
+    display: inline-block;
+    font-size: 115%;
+    line-height: 0;
+    font-family: "fontawesome", "Font Awesome 5 Pro";
+    margin-left: 6px;
   }
   input[type=text],
   input[type=number],
diff --git a/src/assets/scss/_gift-config.scss b/src/assets/scss/_gift-config.scss
index d4789f109..8888cf81c 100644
--- a/src/assets/scss/_gift-config.scss
+++ b/src/assets/scss/_gift-config.scss
@@ -21,6 +21,10 @@
 
 }
 
+label.custom-amount {
+  width: auto;
+}
+
 
 
 .radio,
diff --git a/src/common/components/addressForm/addressForm.tpl.html b/src/common/components/addressForm/addressForm.tpl.html
index 0ac5e2a76..49331bcd3 100644
--- a/src/common/components/addressForm/addressForm.tpl.html
+++ b/src/common/components/addressForm/addressForm.tpl.html
@@ -1,8 +1,8 @@
 <div class="row">
   <div class="col-sm-12">
     <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressCountry | showErrors) || $ctrl.loadingCountriesError}">
-      <label translate>{{'COUNTRY'}}</label>
-      <div class="form-group">
+      <label>
+        <span translate>{{'COUNTRY'}}</span>
         <select class="form-control form-control-subtle"
                 name="addressCountry" required
                 ng-model="$ctrl.address.country"
@@ -10,28 +10,32 @@
                 ng-change="$ctrl.refreshRegions($ctrl.address.country)"
                 ng-disabled="$ctrl.addressDisabled">
         </select>
-        <div role="alert" ng-if="$ctrl.loadingCountriesError">
-          <div class="help-block"><translate>{{'COUNTRY_LIST_ERROR'}}</translate>
-            <button id="retryButton1" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.loadCountries()" translate>{{'RETRY'}}</button></div>
-        </div>
-        <div role="alert" ng-messages="$ctrl.parentForm.addressCountry.$error" ng-if="($ctrl.parentForm.addressCountry | showErrors)">
-          <div class="help-block" ng-message="required" translate>{{'COUNTRY_SELECT_ERROR'}}</div>
+      </label>
+      <div role="alert" ng-if="$ctrl.loadingCountriesError">
+        <div class="help-block">
+          <translate>{{'COUNTRY_LIST_ERROR'}}</translate>
+          <button id="retryButton1" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.loadCountries()" translate>{{'RETRY'}}</button>
         </div>
       </div>
+      <div role="alert" ng-messages="$ctrl.parentForm.addressCountry.$error" ng-if="($ctrl.parentForm.addressCountry | showErrors)">
+        <div class="help-block" ng-message="required" translate>{{'COUNTRY_SELECT_ERROR'}}</div>
+      </div>
     </div>
   </div>
 </div>
 <div class="row">
   <div class="col-sm-12">
     <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressStreetAddress | showErrors)}">
-      <label translate>{{'ADDRESS'}}</label>
-      <input type="text"
-             class="form-control  form-control-subtle"
-             name="addressStreetAddress"
-             ng-model="$ctrl.address.streetAddress"
-             required
-             ng-maxlength="200"
-             ng-disabled="$ctrl.addressDisabled">
+      <label>
+        <span translate>{{'ADDRESS'}}</span>
+        <input type="text"
+              class="form-control  form-control-subtle"
+              name="addressStreetAddress"
+              ng-model="$ctrl.address.streetAddress"
+              required
+              ng-maxlength="200"
+              ng-disabled="$ctrl.addressDisabled">
+      </label>
       <div role="alert" ng-messages="$ctrl.parentForm.addressStreetAddress.$error" ng-if="($ctrl.parentForm.addressStreetAddress | showErrors)">
         <div class="help-block" ng-message="required" translate>{{'ADDRESS_ERROR'}}</div>
         <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_ADDRESS_ERROR'}}</div>
@@ -45,6 +49,7 @@
       <input type="text"
              class="form-control  form-control-subtle"
              name="addressExtendedAddress"
+             aria-label="Address line 2"
              ng-model="$ctrl.address.extendedAddress"
              ng-maxlength="100"
              ng-disabled="$ctrl.addressDisabled">
@@ -59,7 +64,9 @@
     <div class="col-sm-12">
       <div class="form-group" ng-class="{'has-error': ($ctrl.parentForm.intAddressLine3 | showErrors)}">
         <input type="text"
-               class="form-control  form-control-subtle" name="intAddressLine3"
+               class="form-control  form-control-subtle"
+               name="intAddressLine3"
+               aria-label="Address line 3"
                ng-model="$ctrl.address.intAddressLine3"
                ng-maxlength="100"
                ng-disabled="$ctrl.addressDisabled">
@@ -75,6 +82,7 @@
         <input type="text"
                class="form-control  form-control-subtle"
                name="intAddressLine4"
+               aria-label="Address line 4"
                ng-model="$ctrl.address.intAddressLine4"
                ng-maxlength="100"
                ng-disabled="$ctrl.addressDisabled">
@@ -89,14 +97,16 @@
   <div class="row">
     <div class="col-sm-12">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressLocality | showErrors)}">
-        <label translate>{{'CITY'}}</label>
-        <input type="text"
-               class="form-control  form-control-subtle"
-               name="addressLocality"
-               ng-model="$ctrl.address.locality"
-               required
-               ng-maxlength="50"
-               ng-disabled="$ctrl.addressDisabled">
+        <label>
+          <span translate>{{'CITY'}}</span>
+          <input type="text"
+                  class="form-control  form-control-subtle"
+                  name="addressLocality"
+                  ng-model="$ctrl.address.locality"
+                  required
+                  ng-maxlength="50"
+                  ng-disabled="$ctrl.addressDisabled">
+        </label>
         <div role="alert" ng-messages="$ctrl.parentForm.addressLocality.$error" ng-if="($ctrl.parentForm.addressLocality | showErrors)">
           <div class="help-block" ng-message="required" translate>{{'CITY_ERROR'}}</div>
           <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_CITY_ERROR'}}</div>
@@ -107,8 +117,8 @@
   <div class="row">
     <div class="col-sm-6">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressRegion | showErrors) || $ctrl.loadingRegionsError}">
-        <label translate>{{'STATE'}}</label>
-        <div class="form-group">
+        <label>
+          <span translate>{{'STATE'}}</span>
           <select class="form-control  form-control-subtle"
                   name="addressRegion" required
                   ng-model="$ctrl.address.region"
@@ -116,26 +126,30 @@
                   ng-disabled="$ctrl.addressDisabled">
           </select>
           <div role="alert" ng-if="$ctrl.loadingRegionsError">
-            <div class="help-block"> <translate>{{'REGIONS_LOADING_ERROR'}}</translate>
-              <button id="retryButton2" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.refreshRegions($ctrl.address.addressCountry, true)" translate>{{'RETRY'}}</button></div>
+            <div class="help-block">
+              <translate>{{'REGIONS_LOADING_ERROR'}}</translate>
+              <button id="retryButton2" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.refreshRegions($ctrl.address.addressCountry, true)" translate>{{'RETRY'}}</button>
+            </div>
           </div>
           <div role="alert" ng-messages="$ctrl.parentForm.addressRegion.$error" ng-if="($ctrl.parentForm.addressRegion | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'SELECT_STATE_ERROR'}}</div>
           </div>
-        </div>
+        </label>
       </div>
     </div>
     <div class="col-sm-6">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressPostalCode | showErrors)}">
-        <label translate>{{'ZIP'}}</label>
-        <input type="text"
-               class="form-control  form-control-subtle"
-               name="addressPostalCode"
-               ng-model="$ctrl.address.postalCode"
-               required
-               ng-pattern="/^\d{5}(?:[-\s]\d{4})?$/"
-               ng-change="$ctrl.onPostalCodeChanged()"
-               ng-disabled="$ctrl.addressDisabled">
+        <label>
+          <span translate>{{'ZIP'}}</span>
+          <input type="text"
+                class="form-control  form-control-subtle"
+                name="addressPostalCode"
+                ng-model="$ctrl.address.postalCode"
+                required
+                ng-pattern="/^\d{5}(?:[-\s]\d{4})?$/"
+                ng-change="$ctrl.onPostalCodeChanged()"
+                ng-disabled="$ctrl.addressDisabled">
+        </label>
         <div role="alert" ng-messages="$ctrl.parentForm.addressPostalCode.$error" ng-if="($ctrl.parentForm.addressPostalCode | showErrors)">
           <div class="help-block" ng-message="required" translate>{{'ZIP_CODE_ERROR'}}</div>
           <div class="help-block" ng-message="pattern" translate>{{'INVALID_US_ZIP_ERROR'}}</div>
diff --git a/src/common/components/contactInfo/contactInfo.tpl.html b/src/common/components/contactInfo/contactInfo.tpl.html
index da7914ccb..585c7db32 100644
--- a/src/common/components/contactInfo/contactInfo.tpl.html
+++ b/src/common/components/contactInfo/contactInfo.tpl.html
@@ -49,14 +49,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
       <div class="row">
         <div class="col-sm-4">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.nameGivenName | showErrors)}">
-            <label translate>{{'FIRST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="nameGivenName"
-                   ng-model="$ctrl.donorDetails['name']['given-name']"
-                   required
-                   ng-maxlength="50"
-                   ng-disabled="$ctrl.nameFieldsDisabled">
+            <label>
+              <span translate>{{'FIRST_NAME'}}</span>
+              <input type="text"
+                      class="form-control  form-control-subtle"
+                      name="nameGivenName"
+                      ng-model="$ctrl.donorDetails['name']['given-name']"
+                      required
+                      ng-maxlength="50"
+                      ng-disabled="$ctrl.nameFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.nameGivenName.$error" ng-if="($ctrl.detailsForm.nameGivenName | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'FIRST_NAME_ERROR'}}</div>
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_FIRST_NAME_ERROR'}}</div>
@@ -65,13 +67,15 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.nameMiddleInitial | showErrors)}">
-            <label translate>{{'MIDDLE_ABBREV'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="nameMiddleInitial"
-                   ng-model="$ctrl.donorDetails['name']['middle-initial']"
-                   ng-maxlength="15"
-                   ng-disabled="$ctrl.nameFieldsDisabled">
+            <label>
+              <span translate>{{'MIDDLE_ABBREV'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="nameMiddleInitial"
+                    ng-model="$ctrl.donorDetails['name']['middle-initial']"
+                    ng-maxlength="15"
+                    ng-disabled="$ctrl.nameFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.nameMiddleInitial.$error" ng-if="($ctrl.detailsForm.nameMiddleInitial | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_MI_ERROR'}}</div>
             </div>
@@ -79,14 +83,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-4">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.nameFamilyName | showErrors)}">
-            <label translate>{{'LAST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="nameFamilyName"
-                   ng-model="$ctrl.donorDetails['name']['family-name']"
-                   required
-                   ng-maxlength="50"
-                   ng-disabled="$ctrl.nameFieldsDisabled">
+            <label>
+              <span translate>{{'LAST_NAME'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="nameFamilyName"
+                    ng-model="$ctrl.donorDetails['name']['family-name']"
+                    required
+                    ng-maxlength="50"
+                    ng-disabled="$ctrl.nameFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.nameFamilyName.$error" ng-if="($ctrl.detailsForm.nameFamilyName | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'LAST_NAME_ERROR'}}</div>
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_LAST_NAME_ERROR'}}</div>
@@ -95,8 +101,8 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group">
-            <label translate>{{'SUFFIX'}}</label>
-            <div class="form-group">
+            <label>
+              <span translate>{{'SUFFIX'}}</span>
               <select name="nameSuffix" class="form-control form-control-subtle" ng-model="$ctrl.donorDetails['name']['suffix']" ng-disabled="$ctrl.nameFieldsDisabled">
                 <option value=""></option>
                 <option value="Jr." translate>{{'JR'}}</option>
@@ -109,7 +115,7 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
                 <option value="VII" translate>VII</option>
                 <option value="VIII" translate>VIII</option>
               </select>
-            </div>
+            </label>
           </div>
         </div>
 
@@ -118,14 +124,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
       <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Household'">
         <div class="col-sm-4">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseGivenName | showErrors)}">
-            <label translate>{{'SPOUSE_FIRST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="spouseGivenName"
-                   ng-model="$ctrl.donorDetails['spouse-name']['given-name']"
-                   ng-maxlength="50"
-                   placeholder="{{ $ctrl.donorDetails['spouse-name']['family-name'] ? '' : 'Optional' | translate}}"
-                   ng-disabled="$ctrl.spouseFieldsDisabled">
+            <label>
+              <span translate>{{'SPOUSE_FIRST_NAME'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="spouseGivenName"
+                    ng-model="$ctrl.donorDetails['spouse-name']['given-name']"
+                    ng-maxlength="50"
+                    placeholder="{{ $ctrl.donorDetails['spouse-name']['family-name'] ? '' : 'Optional' | translate}}"
+                    ng-disabled="$ctrl.spouseFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.spouseGivenName.$error" ng-if="($ctrl.detailsForm.spouseGivenName | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_FIRST_NAME_ERROR'}}</div>
             </div>
@@ -133,13 +141,15 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseMiddleInitial | showErrors)}">
-            <label translate>{{'MIDDLE_ABBREV'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="spouseMiddleInitial"
-                   ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']"
-                   ng-maxlength="15"
-                   ng-disabled="$ctrl.spouseFieldsDisabled">
+            <label>
+              <span translate>{{'MIDDLE_ABBREV'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="spouseMiddleInitial"
+                    ng-model="$ctrl.donorDetails['spouse-name']['middle-initial']"
+                    ng-maxlength="15"
+                    ng-disabled="$ctrl.spouseFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.spouseMiddleInitial.$error" ng-if="($ctrl.detailsForm.spouseMiddleInitial | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_MI_ERROR'}}</div>
             </div>
@@ -147,14 +157,16 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-4">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseFamilyName | showErrors)}">
-            <label translate>{{'SPOUSE_LAST_NAME'}}</label>
-            <input type="text"
-                   class="form-control  form-control-subtle"
-                   name="spouseFamilyName"
-                   ng-model="$ctrl.donorDetails['spouse-name']['family-name']"
-                   ng-maxlength="50"
-                   placeholder="{{ $ctrl.donorDetails['spouse-name']['given-name'] ? '' : 'Optional' | translate}}"
-                   ng-disabled="$ctrl.spouseFieldsDisabled">
+            <label>
+              <span translate>{{'SPOUSE_LAST_NAME'}}</span>
+              <input type="text"
+                    class="form-control  form-control-subtle"
+                    name="spouseFamilyName"
+                    ng-model="$ctrl.donorDetails['spouse-name']['family-name']"
+                    ng-maxlength="50"
+                    placeholder="{{ $ctrl.donorDetails['spouse-name']['given-name'] ? '' : 'Optional' | translate}}"
+                    ng-disabled="$ctrl.spouseFieldsDisabled">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.spouseFamilyName.$error" ng-if="($ctrl.detailsForm.spouseFamilyName | showErrors)">
               <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_LAST_NAME_ERROR'}}</div>
             </div>
@@ -162,8 +174,8 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
         </div>
         <div class="col-sm-2">
           <div class="form-group">
-            <label translate>{{'SUFFIX'}}</label>
-            <div class="form-group">
+            <label>
+              <span translate>{{'SUFFIX'}}</span>
               <select name="spouseSuffix"
                       class="form-control  form-control-subtle"
                       ng-model="$ctrl.donorDetails['spouse-name']['suffix']"
@@ -179,15 +191,17 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
                 <option value="VII" translate>VII</option>
                 <option value="VIII" translate>VIII</option>
               </select>
-            </div>
+            </label>
           </div>
         </div>
       </div>
       <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Organization'">
         <div class="col-sm-12">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.orgName | showErrors)}">
-            <label translate>{{'ORGANIZATION_NAME'}}</label>
-            <input type="text" class="form-control form-control-subtle" name="orgName" ng-model="$ctrl.donorDetails['organization-name']" ng-maxlength="100" ng-disabled="$ctrl.nameFieldsDisabled" required>
+            <label>
+              <span translate>{{'ORGANIZATION_NAME'}}</span>
+              <input type="text" class="form-control form-control-subtle" name="orgName" ng-model="$ctrl.donorDetails['organization-name']" ng-maxlength="100" ng-disabled="$ctrl.nameFieldsDisabled" required>
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.orgName.$error" ng-if="($ctrl.detailsForm.orgName | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'ORG_NAME_ERROR'}}</div>
               <div class="help-block" ng-message="maxlength" translate>{{'ORG_NAME_MAX_LENGTH_ERROR'}}</div>
@@ -214,8 +228,10 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'CONTACT_INFO'
       <div class="row">
         <div class="col-sm-6">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.email | showErrors)}">
-            <label translate>{{'EMAIL'}}</label>
-            <input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
+            <label>
+              <span translate>{{'EMAIL'}}</span>
+              <input type="email" class="form-control  form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.email.$error" ng-if="($ctrl.detailsForm.email | showErrors)">
               <div class="help-block" ng-message="required" translate>{{'EMAIL_MISSING_ERROR'}}</div>
               <div class="help-block" ng-message="email" translate>{{'EMAIL_INVALID_ERROR'}}</div>
@@ -225,8 +241,10 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'CONTACT_INFO'
         </div>
         <div class="col-sm-6">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.phoneNumber | showErrors)}">
-            <label translate>{{'PHONE'}}</label>
-            <input type="tel" class="form-control form-control-subtle" name="phoneNumber" ng-model="$ctrl.donorDetails['phone-number']" ng-disabled="$ctrl.donorDetails.staff">
+            <label>
+              <span translate>{{'PHONE'}}</span>
+              <input type="tel" class="form-control form-control-subtle" name="phoneNumber" ng-model="$ctrl.donorDetails['phone-number']" ng-disabled="$ctrl.donorDetails.staff">
+            </label>
             <div role="alert" ng-messages="$ctrl.detailsForm.phoneNumber.$error" ng-if="($ctrl.detailsForm.phoneNumber | showErrors)">
               <div class="help-block" ng-message="phone" translate>{{'INVALID_PHONE_ERROR'}}</div>
             </div>
diff --git a/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html b/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html
index 7240707b5..42ab8601b 100644
--- a/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html
+++ b/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html
@@ -13,8 +13,10 @@ <h4 class="panel-title visible" translate>{{'BANK_ACCOUNT_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-6">
         <div class="form-group form-group-default is-required" ng-class="{'has-error': ($ctrl.bankPaymentForm.bankName | showErrors)}">
-          <label translate>{{'BANK_NAME'}}</label>
-          <input type="text" class="form-control form-control-subtle" name="bankName" ng-model="$ctrl.bankPayment.bankName" ng-maxlength="30" required/>
+          <label>
+            <span translate>{{'BANK_NAME'}}</span>
+            <input type="text" class="form-control form-control-subtle" name="bankName" ng-model="$ctrl.bankPayment.bankName" ng-maxlength="30" required/>
+          </label>
           <div role="alert" ng-messages="$ctrl.bankPaymentForm.bankName.$error" ng-if="($ctrl.bankPaymentForm.bankName | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'BANK_NAME_ERROR'}}</div>
             <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_BANK_NAME_ERROR'}}</div>
@@ -41,34 +43,40 @@ <h4 class="panel-title visible" translate>{{'BANK_ACCOUNT_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.bankPaymentForm.routingNumber | showErrors)}">
-          <label translate>{{'ROUTING'}}</label>
-          <input type="text" class="form-control  form-control-subtle" name="routingNumber" autocomplete="off" ng-model="$ctrl.bankPayment.routingNumber" required>
-          <div role="alert" ng-messages="$ctrl.bankPaymentForm.routingNumber.$error" ng-if="($ctrl.bankPaymentForm.routingNumber | showErrors)">
-            <div class="help-block" ng-message="required" translate>{{'ROUTING_NUM_ERROR'}}</div>
-            <div class="help-block" ng-message="length" translate>{{'MIN_LENGTH_ROUTING_ERROR'}}</div>
-            <div class="help-block" ng-message="routingNumber" translate>{{'ROUTING_INVALID_ERROR'}}</div>
-          </div>
+          <label>
+            <span translate>{{'ROUTING'}}</span>
+            <input type="text" class="form-control  form-control-subtle" name="routingNumber" autocomplete="off" ng-model="$ctrl.bankPayment.routingNumber" required>
+            <div role="alert" ng-messages="$ctrl.bankPaymentForm.routingNumber.$error" ng-if="($ctrl.bankPaymentForm.routingNumber | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'ROUTING_NUM_ERROR'}}</div>
+              <div class="help-block" ng-message="length" translate>{{'MIN_LENGTH_ROUTING_ERROR'}}</div>
+              <div class="help-block" ng-message="routingNumber" translate>{{'ROUTING_INVALID_ERROR'}}</div>
+            </div>
+          </label>
         </div>
       </div>
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.bankPaymentForm.accountNumber | showErrors)}">
-          <label translate>{{'ACCOUNT_NUM'}}</label>
-          <input type="text" class="form-control  form-control-subtle" name="accountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.accountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="!$ctrl.paymentMethod || $ctrl.bankPayment.accountNumber">
-          <div role="alert" ng-messages="$ctrl.bankPaymentForm.accountNumber.$error" ng-if="($ctrl.bankPaymentForm.accountNumber | showErrors)">
-            <div class="help-block" ng-message="required" translate>{{'ACCOUNT_NUM_ERROR'}}</div>
-            <div class="help-block" ng-message="minlength" translate>{{'MIN_LENGTH_ACCOUNT_ERROR'}}</div>
-            <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_ACCOUNT_ERROR'}}</div>
-          </div>
+          <label>
+            <span translate>{{'ACCOUNT_NUM'}}</span>
+            <input type="text" class="form-control  form-control-subtle" name="accountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.accountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="!$ctrl.paymentMethod || $ctrl.bankPayment.accountNumber">
+            <div role="alert" ng-messages="$ctrl.bankPaymentForm.accountNumber.$error" ng-if="($ctrl.bankPaymentForm.accountNumber | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'ACCOUNT_NUM_ERROR'}}</div>
+              <div class="help-block" ng-message="minlength" translate>{{'MIN_LENGTH_ACCOUNT_ERROR'}}</div>
+              <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_ACCOUNT_ERROR'}}</div>
+            </div>
+          </label>
         </div>
       </div>
       <div class="col-sm-4">
         <div class="form-group is-required no-wrap" ng-class="{'has-error': ($ctrl.bankPaymentForm.verifyAccountNumber | showErrors)}">
-          <label translate>{{'RETYPE_ACCOUNT_NUM'}}</label>
-          <input type="text" class="form-control  form-control-subtle" name="verifyAccountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.verifyAccountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="$ctrl.bankPayment.accountNumber">
-          <div role="alert" ng-messages="$ctrl.bankPaymentForm.verifyAccountNumber.$error" ng-if="($ctrl.bankPaymentForm.verifyAccountNumber | showErrors)">
-            <div class="help-block" ng-message="required" translate>{{'RETYPE_ACCT_NUM'}}</div>
-            <div class="help-block" ng-message="verifyAccountNumber" translate>{{'ACCT_NUM_MISMATCH'}}</div>
-          </div>
+          <label>
+            <span translate>{{'RETYPE_ACCOUNT_NUM'}}</span>
+            <input type="text" class="form-control  form-control-subtle" name="verifyAccountNumber" autocomplete="off" ng-model="$ctrl.bankPayment.verifyAccountNumber" ng-attr-placeholder="************{{$ctrl.bankPayment.accountNumberPlaceholder}}" ng-required="$ctrl.bankPayment.accountNumber">
+            <div role="alert" ng-messages="$ctrl.bankPaymentForm.verifyAccountNumber.$error" ng-if="($ctrl.bankPaymentForm.verifyAccountNumber | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'RETYPE_ACCT_NUM'}}</div>
+              <div class="help-block" ng-message="verifyAccountNumber" translate>{{'ACCT_NUM_MISMATCH'}}</div>
+            </div>
+          </label>
         </div>
       </div>
 
diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html
index 4025b2789..b22a1d791 100644
--- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html
+++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html
@@ -13,16 +13,18 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-6">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.cardNumber | showErrors)}">
-          <label translate>{{'CARD_NUM'}}</label>
-          <input type="text"
-                 name="cardNumber"
-                 autocomplete="cc-number"
-                 class="form-control  form-control-subtle"
-                 ng-model="$ctrl.creditCardPayment.cardNumber"
-                 ng-attr-placeholder="************{{$ctrl.creditCardPayment.cardNumberPlaceholder}}"
-                 ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
-                 ng-disabled="$ctrl.disableCardNumber"
-                 credit-card-number>
+          <label>
+            <span translate>{{'CARD_NUM'}}</span>
+            <input type="text"
+                   name="cardNumber"
+                   autocomplete="cc-number"
+                   class="form-control  form-control-subtle"
+                   ng-model="$ctrl.creditCardPayment.cardNumber"
+                   ng-attr-placeholder="************{{$ctrl.creditCardPayment.cardNumberPlaceholder}}"
+                   ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
+                   ng-disabled="$ctrl.disableCardNumber"
+                   credit-card-number>
+          </label>
           <div ng-messages="$ctrl.creditCardPaymentForm.cardNumber.$error" role="alert" ng-if="($ctrl.creditCardPaymentForm.cardNumber | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_NUM_ERROR'}}</div>
             <div class="help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_NUM_ERROR'}}</div>
@@ -35,13 +37,15 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
       </div>
       <div class="col-sm-6">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.cardholderName | showErrors)}">
-          <label translate>{{'CARD_NAME'}}</label>
-          <input type="text"
-                 name="cardholderName"
-                 class="form-control  form-control-subtle"
-                 autocomplete="cc-name"
-                 ng-model="$ctrl.creditCardPayment.cardholderName"
-                 ng-maxlength="50" required>
+          <label>
+            <span translate>{{'CARD_NAME'}}</span>
+            <input type="text"
+                   name="cardholderName"
+                   class="form-control  form-control-subtle"
+                   autocomplete="cc-name"
+                   ng-model="$ctrl.creditCardPayment.cardholderName"
+                   ng-maxlength="50" required>
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.cardholderName.$error" ng-if="($ctrl.creditCardPaymentForm.cardholderName | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_NAME_ERROR'}}</div>
             <div class="help-block" ng-message="maxlength" translate>{{'MAX_LENGTH_CARD_NAME_ERROR'}}</div>
@@ -52,25 +56,27 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
     <div class="row">
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.expiryMonth | showErrors)}">
-          <label translate>{{'EXP_MONTH'}}</label>
-          <select class="form-control  form-control-subtle"
-                  name="expiryMonth"
-                  autocomplete="cc-exp-month"
-                  required
-                  ng-model="$ctrl.creditCardPayment.expiryMonth">
-            <option value="01" translate>01 - {{'MONTHS.JAN'}}</option>
-            <option value="02" translate>02 - {{'MONTHS.FEB'}}</option>
-            <option value="03" translate>03 - {{'MONTHS.MAR'}}</option>
-            <option value="04" translate>04 - {{'MONTHS.APR'}}</option>
-            <option value="05" translate>05 - {{'MONTHS.MAY'}}</option>
-            <option value="06" translate>06 - {{'MONTHS.JUN'}}</option>
-            <option value="07" translate>07 - {{'MONTHS.JUL'}}</option>
-            <option value="08" translate>08 - {{'MONTHS.AUG'}}</option>
-            <option value="09" translate>09 - {{'MONTHS.SEP'}}</option>
-            <option value="10" translate>10 - {{'MONTHS.OCT'}}</option>
-            <option value="11" translate>11 - {{'MONTHS.NOV'}}</option>
-            <option value="12" translate>12 - {{'MONTHS.DEC'}}</option>
-          </select>
+          <label>
+            <span translate>{{'EXP_MONTH'}}</span>
+            <select class="form-control  form-control-subtle"
+                    name="expiryMonth"
+                    autocomplete="cc-exp-month"
+                    required
+                    ng-model="$ctrl.creditCardPayment.expiryMonth">
+              <option value="01" translate>01 - {{'MONTHS.JAN'}}</option>
+              <option value="02" translate>02 - {{'MONTHS.FEB'}}</option>
+              <option value="03" translate>03 - {{'MONTHS.MAR'}}</option>
+              <option value="04" translate>04 - {{'MONTHS.APR'}}</option>
+              <option value="05" translate>05 - {{'MONTHS.MAY'}}</option>
+              <option value="06" translate>06 - {{'MONTHS.JUN'}}</option>
+              <option value="07" translate>07 - {{'MONTHS.JUL'}}</option>
+              <option value="08" translate>08 - {{'MONTHS.AUG'}}</option>
+              <option value="09" translate>09 - {{'MONTHS.SEP'}}</option>
+              <option value="10" translate>10 - {{'MONTHS.OCT'}}</option>
+              <option value="11" translate>11 - {{'MONTHS.NOV'}}</option>
+              <option value="12" translate>12 - {{'MONTHS.DEC'}}</option>
+            </select>
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.expiryMonth.$error" ng-if="($ctrl.creditCardPaymentForm.expiryMonth | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_EXP_MONTH_ERROR'}}</div>
             <div class="help-block" ng-message="expired" translate>{{'CARD_EXPIRED_ERROR'}}</div>
@@ -79,14 +85,16 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
       </div>
       <div class="col-sm-4">
         <div class="form-group is-required" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.expiryYear | showErrors)}">
-          <label translate>{{'EXP_YEAR'}}</label>
-          <select class="form-control  form-control-subtle"
-                  name="expiryYear"
-                  autocomplete="cc-exp-year"
-                  required
-                  ng-model="$ctrl.creditCardPayment.expiryYear"
-                  ng-options="year for year in $ctrl.expirationDateYears">
-          </select>
+          <label>
+            <span translate>{{'EXP_YEAR'}}</span>
+            <select class="form-control  form-control-subtle"
+                    name="expiryYear"
+                    autocomplete="cc-exp-year"
+                    required
+                    ng-model="$ctrl.creditCardPayment.expiryYear"
+                    ng-options="year for year in $ctrl.expirationDateYears">
+            </select>
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.expiryYear.$error" ng-if="($ctrl.creditCardPaymentForm.expiryYear | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_EXP_YEAR_ERROR'}}</div>
             <div class="help-block" ng-message="expired" translate>{{'CARD_EXPIRED_ERROR'}}</div>
@@ -95,14 +103,16 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
       </div>
       <div class="col-sm-4" ng-if="!$ctrl.hideCvv">
         <div class="form-group" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.securityCode | showErrors), 'is-required': !$ctrl.paymentMethod}">
-          <label translate>{{'SEC_CODE'}}</label>
-          <input type="text"
-                 name="securityCode"
-                 autocomplete="cc-csc"
-                 class="form-control form-control-subtle"
-                 ng-model="$ctrl.creditCardPayment.securityCode"
-                 ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
-                 ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
+          <label>
+            <span translate>{{'SEC_CODE'}}</span>
+            <input type="text"
+                   name="securityCode"
+                   autocomplete="cc-csc"
+                   class="form-control form-control-subtle"
+                   ng-model="$ctrl.creditCardPayment.securityCode"
+                   ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
+                   ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
+          </label>
           <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.securityCode.$error" ng-if="($ctrl.creditCardPaymentForm.securityCode | showErrors)">
             <div class="help-block" ng-message="required" translate>{{'CARD_SEC_CODE_ERROR'}}</div>
             <div class="help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_SEC_CODE'}}</div>

From 42885c9441b9daf3243ed8064eb1052a594aba49 Mon Sep 17 00:00:00 2001
From: Caleb Cox <canac@users.noreply.github.com>
Date: Tue, 29 Oct 2024 13:58:06 -0500
Subject: [PATCH 8/8] Replace fds@cru.org with dev.services@cru.org

---
 .../pageOptionsModal/pageOptionsModal.tpl.html                | 4 ++--
 src/app/designationEditor/titleModal/titleModal.tpl.html      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
index dde02061a..80545ad08 100644
--- a/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
+++ b/src/app/designationEditor/pageOptionsModal/pageOptionsModal.tpl.html
@@ -30,7 +30,7 @@
       <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>
 
@@ -71,7 +71,7 @@
       </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/titleModal/titleModal.tpl.html b/src/app/designationEditor/titleModal/titleModal.tpl.html
index b4974008b..7e75487de 100644
--- a/src/app/designationEditor/titleModal/titleModal.tpl.html
+++ b/src/app/designationEditor/titleModal/titleModal.tpl.html
@@ -5,7 +5,7 @@
       <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:fds@cru.org">fds@cru.org</a> to update/change.</strong>
+      <strong>Email <a href="mailto:dev.services@cru.org">dev.services@cru.org</a> to update/change.</strong>
     </span>
   </div>