feat(checkout): CHECKOUT-7125 Adding additional aria attributes to co…

…upon code and gift certificate buttons on the cart page
bigcommerce · Aug 23, 2023 · 77cf6f4 · 77cf6f4
1 parent 6266427
commit 77cf6f4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -293,6 +293,7 @@ export default class Cart extends PageManager {
 
             $(event.currentTarget).hide();
             $couponContainer.show();
+            $couponContainer.attr('aria-hidden', false);
             $('.coupon-code-cancel').show();
             $codeInput.trigger('focus');
         });
@@ -301,6 +302,7 @@ export default class Cart extends PageManager {
             event.preventDefault();
 
             $couponContainer.hide();
+            $couponContainer.attr('aria-hidden', true);
             $('.coupon-code-cancel').hide();
             $('.coupon-code-add').show();
         });
@@ -334,12 +336,14 @@ export default class Cart extends PageManager {
             event.preventDefault();
             $(event.currentTarget).toggle();
             $certContainer.toggle();
+            $certContainer.attr('aria-hidden', false);
             $('.gift-certificate-cancel').toggle();
         });
 
         $('.gift-certificate-cancel').on('click', event => {
             event.preventDefault();
             $certContainer.toggle();
+            $certContainer.attr('aria-hidden', true);
             $('.gift-certificate-add').toggle();
             $('.gift-certificate-cancel').toggle();
         });

diff --git a/templates/components/cart/coupon-input.html b/templates/components/cart/coupon-input.html
@@ -5,11 +5,11 @@
     <button class="coupon-code-cancel" style="display: none;">{{lang 'cart.coupons.cancel'}}</button>
 </div>
 
-<div class="cart-form coupon-code" style="display: none;">
+<div class="cart-form coupon-code" aria-hidden="true" style="display: none;">
     <form class="form form--hiddenLabels coupon-form" method="post" action="{{urls.cart}}">
         <label class="form-label" for="couponcode">{{lang 'cart.coupons.coupon_code'}}</label>
         <input class="form-input" data-error="{{lang 'cart.coupons.empty_error'}}"  id="couponcode" type="text" name="couponcode" value="" placeholder="{{lang 'cart.coupons.coupon_code'}}">
-        <input class="button button--primary button--small" type="submit" value="{{lang 'cart.coupons.button'}}">
+        <input class="button button--primary button--small" type="submit" aria-label="Apply Coupon" value="{{lang 'cart.coupons.button'}}">
         <input type="hidden" name="action" value="applycoupon">
     </form>
 </div>
diff --git a/templates/components/cart/gift-certificate-input.html b/templates/components/cart/gift-certificate-input.html
@@ -5,11 +5,11 @@
     <button class="gift-certificate-cancel" style="display: none;">{{lang 'cart.coupons.cancel'}}</button>
 </div>
 
-<div class="cart-form gift-certificate-code" style="display: none;">
+<div class="cart-form gift-certificate-code" aria-hidden="true" style="display: none;">
     <form class="form form--hiddenLabels cart-gift-certificate-form" method="post" action="{{urls.cart}}">
         <label class="form-label" for="certcode">{{lang 'cart.gift_certificates.cert_code'}}</label>
         <input class="form-input" id="certcode" type="text" name="certcode" value="" placeholder="{{lang 'cart.gift_certificates.add_cert_code'}}">
-        <input class="button button--primary button--small" type="submit" value="{{lang 'cart.coupons.button'}}">
+        <input class="button button--primary button--small" aria-label="Apply Gift Certificate" type="submit" value="{{lang 'cart.coupons.button'}}">
         <input type="hidden" name="action" value="applycoupon">
     </form>
 </div>