From b8154beb020b1a2c4472acfda6951bba3ba4444a Mon Sep 17 00:00:00 2001
From: Nikita Puzanenko <nikita.puzanenko@bigcommerce.com>
Date: Thu, 4 Jan 2024 10:47:36 -0600
Subject: [PATCH] feat(checkout): CHECKOUT-7125 Adding additional aria
 attributes to coupon code and gift certificate buttons on the cart page
 (#2391)

Co-authored-by: Volodymyr Krasnoshapka <88093058+BC-krasnoshapka@users.noreply.github.com>
---
 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 9022955be7..6dcf30964f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Corrected typo with the word default previously deafault in config.json [#2410](https://github.com/bigcommerce/cornerstone/pull/2410)
 - Adding autocomplete to common input fields [2397](https://github.com/bigcommerce/cornerstone/pull/2397)
 - Use triple sash on customer's company name to prevent escaping ampersands [#2399](https://github.com/bigcommerce/cornerstone/pull/2399)
+- 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>