feat: review

Author: tblivet

src/js/accessibility/product.ts

@@ -56,14 +56,15 @@ export default () => {
   const focusMap = new Map<'quickview' | 'main', { id: string }>();
 
   // Save the element before the update
-  prestashop.on(events.updateProduct, ({ event }: { event: Event }) => {
+  prestashop.on(events.updateProduct, ({event}: { event: Event }) => {
     const target = event?.target as HTMLElement;
+
     if (!target || !target.id) return;
 
     const isInQuickView = !!target.closest(SelectorsMap.quickviewModal);
     const context: 'quickview' | 'main' = isInQuickView ? 'quickview' : 'main';
 
-    focusMap.set(context, { id: target.id });
+    focusMap.set(context, {id: target.id});
   });
 
   // Restore focus after update
@@ -76,9 +77,9 @@ export default () => {
       } else {
         container = document.querySelector(SelectorsMap.product.container);
       }
-    
+
       if (!container) return;
-    
+
       const elementToFocus = container.querySelector<HTMLElement>(`#${focusData.id}`);
 
       if (elementToFocus) {
@@ -87,7 +88,7 @@ export default () => {
         // Emit event to when the focus is restored
         prestashop.emit(events.combinationFocusRestored, {
           context,
-          elementId: focusData.id
+          elementId: focusData.id,
         });
       }
 
@@ -96,7 +97,7 @@ export default () => {
   });
 
   // Product availability messages announcement
-  prestashop.on(events.combinationFocusRestored, ({ context }: { context: 'quickview' | 'main' }) => {
+  prestashop.on(events.combinationFocusRestored, ({context}: { context: 'quickview' | 'main' }) => {
     let container: HTMLElement | null = null;
 
     // Get the container of the context

templates/catalog/_partials/product-variants.tpl

@@ -6,9 +6,13 @@
   <div class="product__variants js-product-variants">
     {foreach from=$groups key=id_attribute_group item=group}
       {if !empty($group.attributes)}
+        {assign var=groupId value="group_{$id_attribute_group}_{$product.id}"}
+        {assign var=inputId value="input_{$id_attribute_group}_{$product.id}"}
+        {assign var=legendId value="legend_{$id_attribute_group}_{$product.id}"}
+
         <fieldset class="product-variant">
           <div class="product-variant__label">
-            <legend class="form-label product-variant__legend" id="legend_{$product.id}_{$id_attribute_group}">{$group.name}</legend>
+            <legend class="form-label product-variant__legend" id="{$legendId}">{$group.name}</legend>
             <span class="selected-value product-variant__selected" aria-hidden="true">
               {l s=': ' d='Shop.Theme.Catalog'}
               {foreach from=$group.attributes key=id_attribute item=group_attribute}
@@ -20,24 +24,25 @@
           {if $group.group_type == 'select'}
             <select
               class="form-select"
-              id="group_{$product.id}_{$id_attribute_group}"
-              aria-labelledby="legend_{$product.id}_{$id_attribute_group}"
+              id="{$inputId}"
+              aria-labelledby="{$legendId}"
               data-product-attribute="{$id_attribute_group}"
               name="group[{$id_attribute_group}]">
               {foreach from=$group.attributes key=id_attribute item=group_attribute}
                 <option value="{$id_attribute}" {if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
               {/foreach}
             </select>
           {elseif $group.group_type == 'color'}
-            <div id="group_{$product.id}_{$id_attribute_group}" class="product-variant__colors" role="radiogroup" aria-labelledby="legend_{$product.id}_{$id_attribute_group}">
+            <div id="{$groupId}" class="product-variant__colors" role="radiogroup" aria-labelledby="{$legendId}">
               {foreach from=$group.attributes key=id_attribute item=group_attribute}
-                {assign var=optionId value="group_{$product.id}_{$id_attribute_group}_{$id_attribute}"}
-                {assign var=labelId value="label_{$product.id}_{$id_attribute_group}_{$id_attribute}"}
+                {assign var=inputId value="input_{$id_attribute_group}_{$id_attribute}_{$product.id}"}
+                {assign var=labelId value="label_{$id_attribute_group}_{$id_attribute}_{$product.id}"}
+
                 <div class="product-variant__color input-color">
                   <input 
                     class="input-color__input"
                     type="radio"
-                    id="{$optionId}"
+                    id="{$inputId}"
                     data-product-attribute="{$id_attribute_group}"
                     name="group[{$id_attribute_group}]"
                     value="{$id_attribute}"
@@ -46,7 +51,7 @@
                   >
                   <label
                     class="input-color__label{if $group_attribute.texture} input-color__label--texture{/if}{if $group_attribute.selected} input-color__label--active{/if}"
-                    for="{$optionId}"
+                    for="{$inputId}"
                   >
                     <span id="{$labelId}"
                       {if $group_attribute.texture}
@@ -62,22 +67,23 @@
               {/foreach}
             </div>
           {elseif $group.group_type == 'radio'}
-            <div id="group_{$product.id}_{$id_attribute_group}" class="product-variant__radios" role="radiogroup" aria-labelledby="legend_{$product.id}_{$id_attribute_group}">
+            <div id="{$groupId}" class="product-variant__radios" role="radiogroup" aria-labelledby="{$legendId}">
               {foreach from=$group.attributes key=id_attribute item=group_attribute}
-                {assign var=optionId value="group_{$product.id}_{$id_attribute_group}_{$id_attribute}"}
-                {assign var=labelId value="label_{$product.id}_{$id_attribute_group}_{$id_attribute}"}
+                {assign var=inputId value="input_{$id_attribute_group}_{$id_attribute}_{$product.id}"}
+                {assign var=labelId value="label_{$id_attribute_group}_{$id_attribute}_{$product.id}"}
+
                 <div class="product-variant__radio form-check">
                   <input
                     class="form-check-input"
                     type="radio"
-                    id="{$optionId}"
+                    id="{$inputId}"
                     data-product-attribute="{$id_attribute_group}"
                     name="group[{$id_attribute_group}]"
                     value="{$id_attribute}"
                     aria-labelledby="{$labelId}"
                     {if $group_attribute.selected} checked="checked" aria-checked="true"{/if}
                   >
-                  <label for="{$optionId}">
+                  <label for="{$inputId}">
                     <span class="form-check-label" id="{$labelId}"><span class="visually-hidden">{$group.group_name} - </span>{$group_attribute.name}</span>
                   </label>
                 </div>