From 84b676ef37f80407c9236be23eca3bd3f693b2e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= <igor@istepien.dev>
Date: Fri, 10 Nov 2023 07:49:17 +0100
Subject: [PATCH] Product page accessibility

---
 templates/catalog/_partials/product-tabs.tpl    |  2 +-
 .../catalog/_partials/product-variants.tpl      | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/templates/catalog/_partials/product-tabs.tpl b/templates/catalog/_partials/product-tabs.tpl
index eb530163..d51f1cfa 100644
--- 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
index cc026184..cf5552cb 100644
--- 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,7 +100,10 @@
         <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"
@@ -99,6 +111,7 @@
                   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>