feat(cornerstone):BCTHEME-201: add expanded/collapsed state on add-info button

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Quick search query param needs to be fixed while navigating to search page. [#230](https://jira.bigcommerce.com/browse/BCTHEME-230)
 
 ## Draft
+- Add collapsed/expanded state announcement by screen reader to add-info button within shipping estimator. [#1844](https://github.com/bigcommerce/cornerstone/pull/1844)
 - Create unified focus styling in Cornerstone. [#1812](https://github.com/bigcommerce/cornerstone/pull/1812)
 - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)
 - Fixed product image doesn't change on click when viewing a product with multiple images in IE11 [#1748](https://github.com/bigcommerce/cornerstone/pull/1748)

assets/js/theme/cart/shipping-estimator.js

@@ -2,13 +2,15 @@ import stateCountry from '../common/state-country';
 import nod from '../common/nod';
 import utils from '@bigcommerce/stencil-utils';
 import { Validators } from '../common/utils/form-utils';
+import collapsibleFactory from '../common/collapsible';
 import swal from '../global/sweet-alert';
 
 export default class ShippingEstimator {
     constructor($element) {
         this.$element = $element;
 
         this.$state = $('[data-field-type="State"]', this.$element);
+        this.isEstimatorFormOpened = false;
         this.initFormValidation();
         this.bindStateCountryChange();
         this.bindEstimatorEvents();
@@ -133,10 +135,26 @@ export default class ShippingEstimator {
         });
     }
 
+    toggleEstimatorFormState(toggleButton, buttonSelector, $toggleContainer) {
+        const changeAttributesOnToggle = (selectorToActivate) => {
+            $(toggleButton).attr('aria-labelledby', selectorToActivate);
+            $(buttonSelector).text($(`#${selectorToActivate}`).text());
+        };
+
+        if (!this.isEstimatorFormOpened) {
+            changeAttributesOnToggle('estimator-close');
+            $toggleContainer.removeClass('u-hidden');
+        } else {
+            changeAttributesOnToggle('estimator-add');
+            $toggleContainer.addClass('u-hidden');
+        }
+        this.isEstimatorFormOpened = !this.isEstimatorFormOpened;
+    }
+
     bindEstimatorEvents() {
         const $estimatorContainer = $('.shipping-estimator');
         const $estimatorForm = $('.estimator-form');
-
+        collapsibleFactory();
         $estimatorForm.on('submit', event => {
             const params = {
                 country_id: $('[name="shipping-country"]', $estimatorForm).val(),
@@ -165,19 +183,7 @@ export default class ShippingEstimator {
 
         $('.shipping-estimate-show').on('click', event => {
             event.preventDefault();
-
-            $(event.currentTarget).hide();
-            $estimatorContainer.removeClass('u-hiddenVisually');
-            $('.shipping-estimate-hide').show();
-        });
-
-
-        $('.shipping-estimate-hide').on('click', event => {
-            event.preventDefault();
-
-            $estimatorContainer.addClass('u-hiddenVisually');
-            $('.shipping-estimate-show').show();
-            $('.shipping-estimate-hide').hide();
+            this.toggleEstimatorFormState(event.currentTarget, '.shipping-estimate-show__btn-name', $estimatorContainer);
         });
     }
 }

assets/scss/components/stencil/cart/_cart.scss

@@ -426,7 +426,6 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 .coupon-code-add,
 .coupon-code-cancel,
 .shipping-estimate-show,
-.shipping-estimate-hide,
 .gift-certificate-add,
 .gift-certificate-cancel {
     color: stencilColor("color-textSecondary");
@@ -440,7 +439,7 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 }
 
 .coupon-code-cancel,
-.shipping-estimate-hide {
+.shipping-estimate-show[aria-expanded="true"] {
     font-style: italic;
 }
 

lang/en.json

@@ -96,6 +96,7 @@
         },
         "shipping_estimator": {
             "add_info": "Add Info",
+            "cancel": "Cancel",
             "select_a_country": "Country",
             "select_a_state": "State/province",
             "estimate_shipping": "Estimate Shipping",

templates/components/cart/shipping-estimator.html

@@ -6,12 +6,15 @@
     </div>
 {{else}}
     <div class="cart-total-value">
-        <button class="shipping-estimate-show">{{lang 'cart.shipping_estimator.add_info'}}</button>
-        <button class="shipping-estimate-hide" style="display: none;">Cancel</button>
+        <button data-collapsible="add-shipping" class="shipping-estimate-show" aria-labelledby="estimator-add">
+            <span class="shipping-estimate-show__btn-name">{{lang 'cart.shipping_estimator.add_info'}}</span>
+            <span id="estimator-add" class="u-hidden">{{lang 'cart.shipping_estimator.add_info'}}</span>
+            <span id="estimator-close" class="u-hidden">{{lang 'cart.shipping_estimator.cancel'}}</span>
+        </button>
     </div>
 {{/if}}
 
-<div class="shipping-estimator u-hiddenVisually">
+<div id="add-shipping" class="shipping-estimator u-hidden">
     <form class="form estimator-form" data-shipping-estimator>
         <dl>
             <dt class="estimator-form-label">