From 8d7642804dbb34cf2fa6174acd5a5e551b0f5505 Mon Sep 17 00:00:00 2001
From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com>
Date: Tue, 20 Feb 2024 21:00:38 +0200
Subject: [PATCH] fix(storefront): BCTHEME-1769 ADA Compliance - Expandable
 items should be read by screen reader (#2422)

---
 CHANGELOG.md                                  |  1 +
 templates/components/cart/coupon-input.html   | 24 +++++++++++++++----
 .../cart/gift-certificate-input.html          | 22 +++++++++++++----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58b8e56a28..de785877ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change case of Page builder menu item text [#2407](https://github.com/bigcommerce/cornerstone/pull/2407)
 - 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)
+- ADA Compliance - Expandable items should be read by screen reader [2422](https://github.com/bigcommerce/cornerstone/pull/2422)
 - Pre-Orded text in Polish looks cropped in the button on Product page [2414](https://github.com/bigcommerce/cornerstone/pull/2414)
 - 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)
diff --git a/templates/components/cart/coupon-input.html b/templates/components/cart/coupon-input.html
index 4741bfe6b5..3e0e5dd0a0 100644
--- a/templates/components/cart/coupon-input.html
+++ b/templates/components/cart/coupon-input.html
@@ -1,15 +1,29 @@
 <div class="cart-total-value">
+    <button
+        class="coupon-code-add"
+        aria-label="Add Coupon"
+        aria-controls="add-coupon"
+        aria-expanded="false"
+    >
+        {{lang 'cart.coupons.add_coupon'}}
+    </button>
 
-    <button class="coupon-code-add">{{lang 'cart.coupons.add_coupon'}}</button>
-
-    <button class="coupon-code-cancel" style="display: none;">{{lang 'cart.coupons.cancel'}}</button>
+    <button
+        class="coupon-code-cancel"
+        style="display: none;"
+        aria-label="Add Coupon"
+        aria-controls="add-coupon"
+        aria-expanded="true"
+    >
+        {{lang 'cart.coupons.cancel'}}
+    </button>
 </div>
 
-<div class="cart-form coupon-code" aria-hidden="true" style="display: none;">
+<div id="add-coupon" 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" aria-label="{{land 'cart.coupons.apply_coupon'}}" value="{{lang 'cart.coupons.button'}}">
+        <input class="button button--primary button--small" type="submit" aria-label="{{lang '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 a277e818b6..626a6df9d1 100644
--- a/templates/components/cart/gift-certificate-input.html
+++ b/templates/components/cart/gift-certificate-input.html
@@ -1,11 +1,25 @@
 <div class="cart-total-value">
+    <button
+        class="gift-certificate-add"
+        aria-label="Add Certificate"
+        aria-controls="add-certificate"
+        aria-expanded="false"
+    >
+        {{lang 'cart.gift_certificates.gift_certificate'}}
+    </button>
 
-    <button class="gift-certificate-add">{{lang 'cart.gift_certificates.gift_certificate'}}</button>
-
-    <button class="gift-certificate-cancel" style="display: none;">{{lang 'cart.coupons.cancel'}}</button>
+    <button
+        class="gift-certificate-cancel"
+        style="display: none;"
+        aria-label="Add Certificate"
+        aria-controls="add-certificate"
+        aria-expanded="true"
+    >
+        {{lang 'cart.coupons.cancel'}}
+    </button>
 </div>
 
-<div class="cart-form gift-certificate-code" aria-hidden="true" style="display: none;">
+<div id="add-certificate" 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'}}">