feat(cornerstone):BCTHEME-201: add expanded/collapsed state on add-in…

…fo button (#1844) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
bigcommerce · Oct 2, 2020 · 717782f · 717782f
1 parent 7b6fb33
commit 717782f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Add collapsed/expanded state announcement by screen reader to add-info button within shipping estimator. [#1844](https://github.com/bigcommerce/cornerstone/pull/1844)
 - Fixed empty cart notification not announced by screen reader. [#1846](https://github.com/bigcommerce/cornerstone/pull/1846)
 - Product carousel with related products - arrows not working. [#1828](https://github.com/bigcommerce/cornerstone/pull/1828)
 - Fixed contrast on buttons border color in compliance with AA standard [#1817](https://github.com/bigcommerce/cornerstone/pull/1817)

diff --git a/assets/js/theme/cart/shipping-estimator.js b/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);
         });
     }
 }
diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -430,7 +430,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");
@@ -444,7 +443,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;
 }
 

diff --git a/lang/en.json b/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",

diff --git a/templates/components/cart/shipping-estimator.html b/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">