Implement the focus management fix Ludo provided, Address disabled co…

…lor contrast, Update the setting language and its functionality to reflect what Ed suggested, Address Ludo's suggestions from his latest review Continue contrast convention Proper rebase
Shopify · Sep 14, 2022 · 7f099ca · 7f099ca
1 parent 089307b
commit 7f099ca
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 106 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -840,6 +840,7 @@ class VariantSelects extends HTMLElement {
   }
 
   renderProductInfo() {
+    const activeElementId = document.activeElement.id;
     fetch(`${this.dataset.url}?variant=${this.currentVariant.id}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
       .then((response) => response.text())
       .then((responseText) => {
@@ -856,6 +857,8 @@ class VariantSelects extends HTMLElement {
 
         if (price) price.classList.remove('visibility-hidden');
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
+
+        document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
       });
   }
 

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -246,13 +246,13 @@ fieldset.product-form__input .form__label {
 .product-form__input input[type='radio']:disabled + label,
 .product-form__input input[type='radio'].disabled + label {
   border-color: rgba(var(--color-foreground), 0.1);
-  color: rgba(var(--color-foreground), 0.4);
+  color: rgba(var(--color-foreground), 0.6);
   text-decoration: line-through;
 }
 
 .product-form__input input[type='radio'].disabled:checked + label,
 .product-form__input input[type='radio']:disabled:checked + label {
-  color: rgba(var(--color-background),.4);
+  color: rgba(var(--color-background), 0.6);
 }
 .product-form__input input[type='radio']:focus-visible + label {
   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -143,7 +143,7 @@
       },
       "share": "Share this product",
       "sold_out": "Sold out",
-      "unavailable": "Unavailable",
+      "unavailable": "{{ option_value }} [Unavailable]",
       "vendor": "Vendor",
       "variant_sold_out_or_unavailable": "Variant sold out or unavailable",
       "video_exit_message": "{{ title }} opens full screen video in same window.",

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -788,14 +788,8 @@
                 "label": "Pills"
               }
             },
-            "select_soldout_type": {
-              "label": "Sold out dropdown style",
-              "options__1": {
-                "label": "None"
-              },
-              "options__2": {
-                "label": "Disabled"
-              }
+            "show_soldout": {
+              "label": "Show sold out and unavailable variants indicator"
             }
           }
         },
@@ -1669,14 +1663,8 @@
                 "label": "Pills"
               }
             },
-            "select_soldout_type": {
-              "label": "Sold out dropdown style",
-              "options__1": {
-                "label": "None"
-              },
-              "options__2": {
-                "label": "Disabled"
-              }
+            "show_soldout": {
+              "label": "Show sold out and unavailable variants indicator"
             }
           }
         },

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -705,6 +705,12 @@
           ],
           "default": "button",
           "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
+        },
+        {
+          "type": "checkbox",
+          "id": "show_soldout_variants",
+          "default": false,
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.show_soldout.label"
         }
       ]
     },
@@ -879,13 +885,6 @@
         {
           "type": "title"
         },
-        {
-          "type": "text",
-          "settings": {
-            "text": "{{ section.settings.product.metafields.descriptors.subtitle.value }}",
-            "text_style": "subtitle"
-          }
-        },
         {
           "type": "price"
         },

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -486,57 +486,6 @@
                           block: block
                         %}
                       </fieldset>
-                  {%- endfor -%}
-                  <script type="application/json">
-                    {{ product.variants | json }}
-                  </script>
-                </variant-radios>
-              {%- else -%}
-                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} id="variant-selects-{{ section.id }}">
-                  {%- for option in product.options_with_values -%}
-                    <div class="product-form__input product-form__input--dropdown">
-                      <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
-                        {{ option.name }}
-                      </label>
-                      <div class="select">
-                        <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
-                          class="select__select"
-                          name="options[{{ option.name | escape }}]"
-                          form="{{ product_form_id }}"
-                        >
-                          {% render 'product-variant-options',
-                            product: product,
-                            option: option,
-                            block: block
-                          %}
-                        </select>
-                        {% render 'icon-caret' %}
-                      </div>
-                    </div>
-                  {%- endfor -%}
-
-                  <script type="application/json">
-                    {{ product.variants | json }}
-                  </script>
-                </variant-selects>
-              {%- endif -%}
-            {%- endunless -%}
-
-            <noscript class="product-form__noscript-wrapper-{{ section.id }}">
-              <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
-                <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
-                <div class="select">
-                  <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
-                    {%- for variant in product.variants -%}
-                      <option
-                        {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
-                        {% if variant.available == false %}disabled{% endif %}
-                        value="{{ variant.id }}"
-                      >
-                        {{ variant.title }}
-                        {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
-                        - {{ variant.price | money | strip_html }}
-                      </option>
                     {%- endfor -%}
                     <script type="application/json">
                       {{ product.variants | json }}
@@ -561,16 +510,11 @@
                             name="options[{{ option.name | escape }}]"
                             form="{{ product_form_id }}"
                           >
-                            {%- for value in option.values -%}
-                              <option
-                                value="{{ value | escape }}"
-                                {% if option.selected_value == value %}
-                                  selected="selected"
-                                {% endif %}
-                              >
-                                {{ value }}
-                              </option>
-                            {%- endfor -%}
+                            {% render 'product-variant-options',
+                              product: product,
+                              option: option,
+                              block: block
+                            %}
                           </select>
                           {% render 'icon-caret' %}
                         </div>
@@ -1279,20 +1223,10 @@
           "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
         },
         {
-          "type": "select",
-          "id": "select_soldout_type",
-          "options": [
-            {
-              "value": "none",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.options__1.label"
-            },
-            {
-              "value": "disabled",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.options__2.label"
-            }
-          ],
-          "default": "none",
-          "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.label"
+          "type": "checkbox",
+          "id": "show_soldout_variants",
+          "default": false,
+          "label": "t:sections.main-product.blocks.variant_picker.settings.show_soldout.label"
         }
       ]
     },

diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
@@ -28,7 +28,11 @@
 
 {%- for value in option.values -%}
   {%- liquid
-    assign option_disabled = true
+    assign option_disabled = false
+    if block.settings.show_soldout_variants
+      assign option_disabled = true
+    endif
+
     for option1_name in variants_option1_arr
       case option.position
         when 1
@@ -53,14 +57,14 @@
           value="{{ value | escape }}"
           form="{{ product_form_id }}"
           {% if option.selected_value == value %}checked{% endif %}
-          {% if option_disabled %}class="disabled" aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}
+          {% if option_disabled %}class="disabled"{% endif %}
     >
     <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
-      {{ value }}
+      {{ value }}{% if option_disabled %}<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>{% endif %}
     </label>
   {%- elsif block.settings.picker_type == 'dropdown' -%}
-    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}{% if option_disabled and block.settings.select_soldout_type == 'disabled' %} aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}>
-      {{ value }}{% if option_disabled %} [{{ 'products.product.unavailable' | t }}]{% endif %}
+    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>
+      {% if option_disabled %}{{ 'products.product.unavailable' | t: option_value: value  }}{% else %}{{ value }}{% endif %}
     </option>
   {%- endif -%}
 {%- endfor -%}