Product page accessibility

Oksydan · Nov 10, 2023 · 84b676e · 84b676e
1 parent 174ef72
commit 84b676e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/templates/catalog/_partials/product-tabs.tpl b/templates/catalog/_partials/product-tabs.tpl
@@ -37,7 +37,7 @@
     <div class="card-header">
       <ul class="nav nav-tabs card-header-tabs" role="tablist">
         {foreach $tabsList as $tab}
-          <li class="nav-item">
+          <li class="nav-item" role="presentation">
             <a
               class="nav-link {if $tab@first}active{/if}"
               data-bs-toggle="tab"

diff --git a/templates/catalog/_partials/product-variants.tpl b/templates/catalog/_partials/product-variants.tpl
@@ -26,7 +26,16 @@
   {foreach from=$groups key=id_attribute_group item=group}
     {if !empty($group.attributes)}
     <div class="product-variants-item mb-3">
-      <p class="control-label h6 mb-2">{$group.name}</p>
+      {if $group.group_type == 'select'}
+        <label
+          class="control-label h6 mb-2"
+          for="group_{$id_attribute_group}"
+        >{$group.name}</label>
+      {else}
+        <p class="control-label h6 mb-2">{$group.name}</p>
+      {/if}
+
+
       {if $group.group_type == 'select'}
         <select
           class="form-select"
@@ -91,14 +100,18 @@
         <ul id="group_{$id_attribute_group}" class="row mx-n1">
           {foreach from=$group.attributes key=id_attribute item=group_attribute}
             <li class="input-container attribute-radio col-auto px-1 mb-2">
-              <label class="attribute-radio__label">
+              <label
+                class="attribute-radio__label"
+                for="{$id_attribute_group}_{$id_attribute}"
+              >
                 <input
                   class="input-radio attribute-radio__input"
                   type="radio"
                   data-product-attribute="{$id_attribute_group}"
                   name="group[{$id_attribute_group}]"
                   value="{$id_attribute}"
                   title="{$group_attribute.name}"
+                  id="{$id_attribute_group}_{$id_attribute}"
                   {if $group_attribute.selected}checked="checked"{/if}>
                 <span class="attribute-radio__text">{$group_attribute.name}</span>
               </label>