From 4fd6904a263ef2db21be533a8dcdf9b5d5396c7b Mon Sep 17 00:00:00 2001
From: nikita puzanenko <nikita.puzanenko@bigcommerce.com>
Date: Wed, 23 Aug 2023 16:20:56 -0500
Subject: [PATCH] feat(checkout): CHECKOUT-7125 Adding additional aria
 attributes to coupon code and gift certificate buttons on the cart page

---
 CHANGELOG.md                                          | 1 +
 assets/js/theme/cart.js                               | 4 ++++
 lang/en.json                                          | 2 ++
 templates/components/cart/coupon-input.html           | 4 ++--
 templates/components/cart/gift-certificate-input.html | 4 ++--
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2ea897af6..65197361f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)
 - Added nvm config [#2389](https://github.com/bigcommerce/cornerstone/pull/2389)
 - Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392) 
+- Adding aria attributes to cart page coupon code and gift cert buttons [#2391](https://github.com/bigcommerce/cornerstone/pull/2391)
 
 ## 6.12.0 (07-06-2023)
 - sync package lock file [#2373](https://github.com/bigcommerce/cornerstone/pull/2373)
diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
index 0435140a98..2bf4eb53ad 100644
--- 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/lang/en.json b/lang/en.json
index 131da67f0b..838959839f 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -79,6 +79,7 @@
         "remove_item": "Remove {name} from cart",
         "confirm_delete": "Are you sure you want to delete this item?",
         "coupons": {
+            "apply_coupon": "Apply coupon",
             "empty_error": "Please enter your coupon code.",
             "cancel": "Cancel",
             "add_code": "Add code",
@@ -89,6 +90,7 @@
             "remove": "Remove"
         },
         "gift_certificates": {
+            "apply_gift_certificate": "Apply gift certificate",
             "change_gift_certificate": "Change {certificate_name}",
             "add_cert_code": "Add Certificate",
             "gift_certificate": "Gift Certificate",
diff --git a/templates/components/cart/coupon-input.html b/templates/components/cart/coupon-input.html
index 911203a2cb..4741bfe6b5 100644
--- 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="{{land 'cart.coupons.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
index 4b8aef4ade..a277e818b6 100644
--- 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="{{lang 'cart.gift_certificates.apply_gift_certificate'}}" type="submit" value="{{lang 'cart.coupons.button'}}">
         <input type="hidden" name="action" value="applycoupon">
     </form>
 </div>