feat(storefront) BCTHEME-381 add sufficient & informative text along with the color swatches

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Fixed required checkbox message displaying. [1963](https://github.com/bigcommerce/cornerstone/pull/1963)
 
 ## Draft
+- Provided sufficient & informative text along with the color swatches [#1976](https://github.com/bigcommerce/cornerstone/pull/1976)
 - If multiple Pick List Options are applied, customers cannot select "none" on both. [#1975](https://github.com/bigcommerce/cornerstone/pull/1975)
 - Moved phrase from compare.html to en.json for increasing localization. [#1972](https://github.com/bigcommerce/cornerstone/pull/1972)
 - Fixed focus for sort by dropdown on reloading page. [#1964](https://github.com/bigcommerce/cornerstone/pull/1964)

assets/js/theme/common/product-details.js

@@ -17,11 +17,23 @@ export default class ProductDetails extends ProductDetailsBase {
         this.imageGallery = new ImageGallery($('[data-image-gallery]', this.$scope));
         this.imageGallery.init();
         this.listenQuantityChange();
+        this.$swatchOptionMessage = $('.swatch-option-message');
+        this.swatchOptionMessageInitText = this.$swatchOptionMessage.text();
 
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);
         const hasOptions = $productOptionsElement.html().trim().length;
         const hasDefaultOptions = $productOptionsElement.find('[data-default]').length;
+        const $productSwatchGroup = $('[id*="attribute_swatch"]', $form);
+
+        if (context.showSwatchNames) {
+            this.$swatchOptionMessage.removeClass('u-hidden');
+            $productSwatchGroup.on('change', ({ target }) => this.showSwatchNameOnOption($(target)));
+
+            $.each($productSwatchGroup, (_, element) => {
+                if ($(element).is(':checked')) this.showSwatchNameOnOption($(element));
+            });
+        }
 
         $productOptionsElement.on('change', event => {
             this.productOptionsChanged(event);
@@ -187,6 +199,25 @@ export default class ProductDetails extends ProductDetailsBase {
         });
     }
 
+    /**
+     * if this setting is enabled in Page Builder
+     * show name for swatch option
+     */
+    showSwatchNameOnOption($swatch) {
+        const swatchName = $swatch.attr('aria-label');
+
+        $('[data-product-attribute="swatch"] [data-option-value]').text(swatchName);
+        this.$swatchOptionMessage.text(`${this.swatchOptionMessageInitText} ${swatchName}`);
+        this.setLiveRegionAttributes(this.$swatchOptionMessage, 'status', 'assertive');
+    }
+
+    setLiveRegionAttributes($element, roleType, ariaLiveStatus) {
+        $element.attr({
+            role: roleType,
+            'aria-live': ariaLiveStatus,
+        });
+    }
+
     showProductImage(image) {
         if (isPlainObject(image)) {
             const zoomImageUrl = utils.tools.imageSrcset.getSrcset(
@@ -338,10 +369,7 @@ export default class ProductDetails extends ProductDetailsBase {
             }
         });
 
-        $addToCartBtn.next().attr({
-            role: 'status',
-            'aria-live': 'polite',
-        });
+        this.setLiveRegionAttributes($addToCartBtn.next(), 'status', 'polite');
     }
 
     /**

config.json

@@ -87,6 +87,7 @@
     "show_custom_fields_tabs": false,
     "show_product_weight": true,
     "show_product_dimensions": false,
+    "show_product_swatch_names": true,
     "product_list_display_mode": "grid",
     "logo-position": "center",
     "logo_size": "250x100",

lang/en.json

@@ -744,6 +744,7 @@
         "upc": "UPC:",
         "condition": "Condition:",
         "availability": "Availability:",
+        "swatch_option_announcement": "Selected {swatch_name} is",
         "shipping": "Shipping:",
         "shipping_fixed": "{amount} (Fixed Shipping Cost)",
         "shipping_free": "Free Shipping",

schema.json

@@ -1400,6 +1400,12 @@
         "force_reload": true,
         "id": "show_product_dimensions"
       },
+      {
+        "type": "checkbox",
+        "label": "i18n.ShowProductSwatchNames",
+        "force_reload": true,
+        "id": "show_product_swatch_names"
+      },
       {
         "type": "checkbox",
         "label": "i18n.ShowShopByPriceIn",

schemaTranslations.json

@@ -1216,6 +1216,13 @@
     "uk": "Показати розміри продукту",
     "zh": "显示产品尺寸"
   },
+  "i18n.ShowProductSwatchNames": {
+    "default": "Show product swatch names",
+    "fr": "Show product swatch names",
+    "it": "Show product swatch names",
+    "uk": "Показати назви зразків продукту",
+    "zh": "Show product swatch names"
+  },
   "i18n.ShowShopByPriceIn": {
     "default": "Show \"Shop by Price\" in filters",
     "fr": "Afficher \"Acheter par prix\" dans les filtres",

templates/components/common/requireness-msg.html

@@ -1,3 +1,7 @@
 <small>
-    {{#if required}}{{lang 'common.required'}}{{else}}{{lang 'common.optional'}}{{/if}}
+    {{#if required}}
+    ({{lang 'common.required'}})
+    {{else}}
+    {{lang 'common.optional'}}
+    {{/if}}
 </small>

templates/components/products/options/swatch.html

@@ -5,6 +5,10 @@
 
         {{> components/common/requireness-msg}}
     </label>
+    <span 
+        class="swatch-option-message aria-description--hidden u-hidden">
+        {{ lang 'products.swatch_option_announcement' swatch_name=this.display_name}}
+    </span>
 
     {{#unless required}}
         <input

templates/components/products/product-view.html

@@ -224,6 +224,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                 <input type="hidden" name="action" value="add">
                 <input type="hidden" name="product_id" value="{{product.id}}"/>
                 <div data-product-option-change style="display:none;">
+                    {{inject 'showSwatchNames' theme_settings.show_product_swatch_names}}
                     {{#each product.options}}
                         {{{dynamicComponent 'components/products/options'}}}
                     {{/each}}