FFWEB-3414: Support tab navigation

Support tab navigation for search, suggest and paging components

Author: Rayn93

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 ## Unreleased
 ### Change
+- Support tab navigation for search, suggest and paging components
 - Upgrade Web Components version to v5.1.5
 
 ## [v6.1.0] - 2025.03.24

views/twig/webcomponents/widget/paging.html.twig

@@ -1,25 +1,25 @@
 <ff-paging class="col-xs-12 pagination-options" unresolved>
     <ff-paging-set state="currentPage == 1">
         <div class="prev-link ffw-page-item-container ffw-cursor">&larr; {{ translate({ ident: "PREVIOUS" }) }}</div>
-        <ff-paging-item type="currentLink -1">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="currentLink" class="active">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="currentLink +1">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="nextLink">{{ translate({ ident: "NEXT" }) }} &rarr;</ff-paging-item>
+        <ff-paging-item type="currentLink -1"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink" class="active"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink +1"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="nextLink"><a href="#">{{ translate({ ident: "NEXT" }) }} &rarr;</a></ff-paging-item>
     </ff-paging-set>
 
     <ff-paging-set state="currentPage == pageCount">
-        <ff-paging-item type="previousLink">&larr; {{ translate({ ident: "PREVIOUS" }) }}</ff-paging-item>
-        <ff-paging-item type="currentLink -1">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="currentLink" class="active">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="currentLink +1">{{ '{{page}}' }}</ff-paging-item>
-        <div class="next-link ffw-page-item-container ffw-cursor">{{ translate({ ident: "NEXT" }) }} &rarr;</div>
+        <ff-paging-item type="previousLink"><a href="#">&larr; {{ translate({ ident: "PREVIOUS" }) }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink -1"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink" class="active"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink +1"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <div class="next-link ffw-page-item-container ffw-cursor"><a href="#">{{ translate({ ident: "NEXT" }) }} &rarr;</a></div>
     </ff-paging-set>
 
     <ff-paging-set state="currentPage > 1 && currentPage < pageCount">
-        <ff-paging-item type="previousLink">&larr; {{ translate({ ident: "PREVIOUS" }) }}</ff-paging-item>
-        <ff-paging-item type="currentLink -1">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="currentLink" class="active">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="currentLink +1">{{ '{{page}}' }}</ff-paging-item>
-        <ff-paging-item type="nextLink">{{ translate({ ident: "NEXT" }) }} &rarr;</ff-paging-item>
+        <ff-paging-item type="previousLink"><a href="#">&larr; {{ translate({ ident: "PREVIOUS" }) }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink -1"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink" class="active"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="currentLink +1"><a href="#">{{ '{{page}}' }}</a></ff-paging-item>
+        <ff-paging-item type="nextLink"><a href="#">{{ translate({ ident: "NEXT" }) }} &rarr;</a></ff-paging-item>
     </ff-paging-set>
 </ff-paging>

views/twig/webcomponents/widget/suggest.html.twig

@@ -10,21 +10,21 @@
         <div data-container="searchTerm">
             <p class="containerCaption">{{ translate({ ident: "FF_SEARCH_SUGGESTIONS" }) }}</p>
             <ff-suggest-item type="searchTerm">
-                <span>{{ '{{{name}}}' }}</span>
+                <a href="#">{{ '{{{name}}}' }}</a>
             </ff-suggest-item>
         </div>
 
         <div data-container="category">
             <p class="containerCaption">{{ translate({ ident: "FF_CATEGORY_SUGGESTIONS" }) }}</p>
             <ff-suggest-item type="category">
-                <span>{{ '{{{name}}}' }}</span>
+                <a href="#">{{ '{{{name}}}' }}</a>
             </ff-suggest-item>
         </div>
 
         <div data-container="brand">
             <p class="containerCaption">{{ translate({ ident: "FF_BRANDS" }) }}</p>
             <ff-suggest-item type="brand">
-                <span>{{ '{{{name}}}' }}</span>
+                <a href="#">{{ '{{{name}}}' }}</a>
             </ff-suggest-item>
         </div>
     </section>
@@ -34,7 +34,7 @@
             <p class="containerCaption">{{ translate({ ident: "FF_SUGGESTED_PRODUCTS" }) }}</p>
             <ff-suggest-item type="productName">
                 <img data-image />
-                <div class="product-name">{{ '{{{name}}}' }}</div>
+                <a href="#" class="product-name">{{ '{{{name}}}' }}</a>
             </ff-suggest-item>
         </div>
     </section>