Merge pull request #34 from ivoba-oxid/imporved-tabs

improved tabs
moga-kit · Jul 29, 2021 · 1e4a80e · 1e4a80e
2 parents 926dcc2 + 94a0fd4
commit 1e4a80e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 34 deletions.
diff --git a/tpl/page/details/inc/related_products_tabs.tpl b/tpl/page/details/inc/related_products_tabs.tpl
@@ -1,16 +1,13 @@
 [{assign var="blFirstTab" value=true}]
 
-
 [{block name="details_relatedproducts_accessoires"}]
     [{if $oView->getAccessoires()}]
         [{capture append="reltabs"}]
-            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#accessoires" data-bs-toggle="tab">[{oxmultilang ident="ACCESSORIES"}]</a>
+            <a class="nav-link[{if $blFirstTab}] active[{/if}]" id="accessoires-tab" href="#accessoires" data-bs-toggle="tab" role="tab" aria-controls="nav-accesoires" aria-selected="false">[{oxmultilang ident="ACCESSORIES"}]</a>
         [{/capture}]
         [{capture append="reltabsContent"}]
-            <div id="accessoires" class="tab-pane[{if $blFirstTab}] active[{/if}]">
-                <div class="container-xxl">
-                    [{include file="widget/product/list.tpl" type="grid" listId="accessories" products=$oView->getAccessoires() subhead="WIDGET_PRODUCT_RELATED_PRODUCTS_ACCESSORIES_SUBHEADER"|oxmultilangassign}]
-                </div>
+            <div id="accessoires" class="container-xxl tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="home-tab">
+                [{include file="widget/product/list.tpl" type="grid" listId="accessories" products=$oView->getAccessoires() subhead="WIDGET_PRODUCT_RELATED_PRODUCTS_ACCESSORIES_SUBHEADER"|oxmultilangassign}]
             </div>
         [{/capture}]
     [{assign var="blFirstTab" value=false}]
@@ -20,13 +17,11 @@
 [{block name="details_relatedproducts_also_bought"}]
     [{if $oView->getAlsoBoughtTheseProducts()}]
         [{capture append="reltabs"}]
-            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#also" data-bs-toggle="tab">[{oxmultilang ident="CUSTOMERS_ALSO_BOUGHT"}]</a>
+            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#also" id="also-tab" data-bs-toggle="tab" role="tab" aria-controls="nav-also" aria-selected="true">[{oxmultilang ident="CUSTOMERS_ALSO_BOUGHT"}]</a>
         [{/capture}]
         [{capture append="reltabsContent"}]
-            <div id="also" class="tab-pane[{if $blFirstTab}] active[{/if}]">
-                <div class="container-xxl">
-                    [{include file="widget/product/list.tpl" type="grid" listId="alsoBought" subhead="PAGE_DETAILS_CUSTOMERS_ALSO_BOUGHT_SUBHEADER"|oxmultilangassign products=$oView->getAlsoBoughtTheseProducts()}]
-                </div>
+            <div id="also" class="container-xxl tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="also-tab">
+                [{include file="widget/product/list.tpl" type="grid" listId="also" subhead="PAGE_DETAILS_CUSTOMERS_ALSO_BOUGHT_SUBHEADER"|oxmultilangassign products=$oView->getAlsoBoughtTheseProducts()}]
             </div>
         [{/capture}]
     [{assign var="blFirstTab" value=false}]
@@ -36,13 +31,11 @@
 [{block name="details_relatedproducts_similarproducts"}]
     [{if $oView->getSimilarProducts()}]
         [{capture append="reltabs"}]
-            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#similars" data-bs-toggle="tab">[{oxmultilang ident="SIMILAR_PRODUCTS"}]</a>
+            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#similars" id="similars-tab" data-bs-toggle="tab" role="tab" aria-controls="nav-similars" aria-selected="false">[{oxmultilang ident="SIMILAR_PRODUCTS"}]</a>
         [{/capture}]
         [{capture append="reltabsContent"}]
-            <div id="similars" class="tab-pane[{if $blFirstTab}] active[{/if}]">
-                <div class="container-xxl">
-                    [{include file="widget/product/list.tpl" type="grid" listId="similar"  products=$oView->getSimilarProducts() subhead="WIDGET_PRODUCT_RELATED_PRODUCTS_SIMILAR_SUBHEADER"|oxmultilangassign}]
-                </div>
+            <div id="similars" class="container-xxl tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="similars-tab">
+                [{include file="widget/product/list.tpl" type="grid" listId="similars" products=$oView->getSimilarProducts() subhead="WIDGET_PRODUCT_RELATED_PRODUCTS_SIMILAR_SUBHEADER"|oxmultilangassign}]
             </div>
         [{/capture}]
     [{assign var="blFirstTab" value=false}]
@@ -52,13 +45,11 @@
 [{block name="details_relatedproducts_crossselling"}]
     [{if $oView->getCrossSelling()}]
         [{capture append="reltabs"}]
-            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#cross" data-bs-toggle="tab">[{oxmultilang ident="HAVE_YOU_SEEN"}]</a>
+            <a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#cross" id="cross-tab" data-bs-toggle="tab" role="tab" aria-controls="nav-cross" aria-selected="false">[{oxmultilang ident="HAVE_YOU_SEEN"}]</a>
         [{/capture}]
         [{capture append="reltabsContent"}]
-        <div id="cross" class="tab-pane[{if $blFirstTab}] active[{/if}]">
-            <div class="container-xxl">
-                [{include file="widget/product/list.tpl" type="grid" listId="crossproducts" products=$oView->getCrossSelling() subhead="WIDGET_PRODUCT_RELATED_PRODUCTS_CROSSSELING_SUBHEADER"|oxmultilangassign}]
-            </div>
+        <div id="cross" class="container-xxl tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="cross-tab">
+            [{include file="widget/product/list.tpl" type="grid" listId="cross" products=$oView->getCrossSelling() subhead="WIDGET_PRODUCT_RELATED_PRODUCTS_CROSSSELING_SUBHEADER"|oxmultilangassign}]
         </div>
         [{/capture}]
     [{assign var="blFirstTab" value=false}]
@@ -67,9 +58,9 @@
 
 [{if $reltabs}]
 <div class="related-tabs">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
         [{foreach from=$reltabs item="reltab" name="reltabs"}]
-            <li class="nav-item">[{$reltab}]</li>
+            <li class="nav-item" role="presentation">[{$reltab}]</li>
         [{/foreach}]
     </ul>
     <div class="tab-content py-5">
@@ -78,4 +69,4 @@
         [{/foreach}]
     </div>
 </div>
-[{/if}]
+[{/if}]
diff --git a/tpl/page/details/inc/tabs.tpl b/tpl/page/details/inc/tabs.tpl
@@ -4,9 +4,13 @@
     [{oxhasrights ident="SHOWLONGDESCRIPTION"}]
         [{assign var="oLongdesc" value=$oDetailsProduct->getLongDescription()}]
         [{if $oLongdesc->value}]
-            [{capture append="tabs"}]<a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#description" data-bs-toggle="tab">[{oxmultilang ident="DESCRIPTION"}]</a>[{/capture}]
+            [{capture append="tabs"}]
+                <a id="description-tab" class="nav-link[{if $blFirstTab}] active[{/if}]" href="#description" data-bs-toggle="tab" role="tab" aria-controls="description" aria-selected="true">
+                [{oxmultilang ident="DESCRIPTION"}]
+                </a>
+            [{/capture}]
             [{capture append="tabsContent"}]
-                <div id="description" class="tab-pane[{if $blFirstTab}] active[{/if}]">
+                <div id="description" class="tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="description-tab">
                     <div class="container-xxl">
                         [{oxeval var=$oLongdesc}]
                         [{if $oDetailsProduct->oxarticles__oxexturl->value}]
@@ -28,9 +32,13 @@
 
 [{block name="details_tabs_attributes"}]
     [{if $oView->getAttributes()}]
-        [{capture append="tabs"}]<a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#attributes" data-bs-toggle="tab">[{oxmultilang ident="SPECIFICATION"}]</a>[{/capture}]
+        [{capture append="tabs"}]
+            <a id="attributes-tab" class="nav-link[{if $blFirstTab}] active[{/if}]" href="#attributes" data-bs-toggle="tab" role="tab" aria-controls="attributes" aria-selected="false">
+            [{oxmultilang ident="SPECIFICATION"}]
+            </a>
+        [{/capture}]
         [{capture append="tabsContent"}]
-            <div id="attributes" class="tab-pane[{if $blFirstTab}] active[{/if}]">
+            <div id="attributes" class="tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="attributes-tab">
                 <div class="container-xxl">
                     [{include file="page/details/inc/attributes.tpl"}]
                 </div>
@@ -42,9 +50,13 @@
 
 [{*block name="details_tabs_pricealarm"}]
     [{if $oView->isPriceAlarm() && !$oDetailsProduct->isParentNotBuyable()}]
-        [{capture append="tabs"}]<a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#pricealarm" data-bs-toggle="tab">[{oxmultilang ident="PRICE_ALERT"}]</a>[{/capture}]
+        [{capture append="tabs"}]
+            <a id="pricealarm-tab" class="nav-link[{if $blFirstTab}] active[{/if}]" href="#pricealarm" data-bs-toggle="tab" role="tab" aria-controls="pricealarm" aria-selected="false">
+                [{oxmultilang ident="PRICE_ALERT"}]
+            </a>
+        [{/capture}]
         [{capture append="tabsContent"}]
-            <div id="pricealarm" class="tab-pane[{if $blFirstTab}] active[{/if}]">
+            <div id="pricealarm" class="tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="pricealarm-tab">
                 <div class="container-xxl">
                     [{include file="form/pricealarm.tpl"}]
                 </div>
@@ -53,6 +65,7 @@
         [{/capture}]
     [{/if}]
 [{/block*}]
+
 [{assign var="oManufacturer" value=$oView->getManufacturer()}]
 [{if $oManufacturer && $oManufacturer->oxmanufacturers__oxshortdesc->value}]
     [{capture append="tabs"}]<a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#manufacturer-tab" data-bs-toggle="tab">[{oxmultilang ident="MORE_ABOUT"}] [{$oManufacturer->oxmanufacturers__oxtitle->value}]</a>[{/capture}]
@@ -76,9 +89,13 @@
 
 [{block name="details_tabs_media"}]
     [{if $oView->getMediaFiles() || $oDetailsProduct->oxarticles__oxfile->value}]
-        [{capture append="tabs"}]<a class="nav-link[{if $blFirstTab}] active[{/if}]" href="#media" data-bs-toggle="tab">[{oxmultilang ident="MEDIA"}]</a>[{/capture}]
+        [{capture append="tabs"}]
+            <a id="media-tab" class="nav-link[{if $blFirstTab}] active[{/if}]" href="#media" data-bs-toggle="tab" role="tab" aria-controls="media" aria-selected="false">
+                [{oxmultilang ident="MEDIA"}]
+            </a>
+        [{/capture}]
         [{capture append="tabsContent"}]
-            <div id="media" class="tab-pane[{if $blFirstTab}] active[{/if}]">
+            <div id="media" class="tab-pane[{if $blFirstTab}] active[{/if}]" role="tabpanel" aria-labelledby="media-tab">
                 <div class="container-xxl">
                     [{include file="page/details/inc/media.tpl"}]
                 </div>
@@ -97,9 +114,9 @@
 [{block name="details_tabs_main"}]
     [{if $tabs}]
         <div class="details-tabs my-5">
-            <ul class="nav nav-tabs">
+            <ul class="nav nav-tabs" role="tablist">
                 [{foreach from=$tabs item="tab" name="tabs"}]
-                    <li class="nav-item">[{$tab}]</li>
+                    <li class="nav-item" role="presentation">[{$tab}]</li>
                 [{/foreach}]
                 [{block name="details_tabs_social_navigation"}][{/block}]
             </ul>