fix(storefront): BCTHEME-1769 ADA Compliance - Expandable items shoul…

…d be read by screen reader (#2422)

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)

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>

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'}}">