From a334562d669c37ed6affcb6b8057ea119bcc2fbd Mon Sep 17 00:00:00 2001
From: robertsaternus <robert.saternus@gmail.com>
Date: Mon, 14 Jul 2025 14:28:17 +0200
Subject: [PATCH] FFWEB-3412: Support tab navigation

Support tab navigation for search, suggest and paging components
---
 CHANGELOG.md                                 |  3 ++
 src/view/frontend/templates/ff/paging.phtml  | 40 ++++++++++----------
 src/view/frontend/templates/ff/suggest.phtml |  8 ++--
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 298fa7fc..b07c4a41 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 ## Unreleased
+### Change
+- Support tab navigation for search, suggest and paging components
+
 ### Fix
 - Cart tracking - parse price to float
 
diff --git a/src/view/frontend/templates/ff/paging.phtml b/src/view/frontend/templates/ff/paging.phtml
index 75c60715..64346d25 100644
--- a/src/view/frontend/templates/ff/paging.phtml
+++ b/src/view/frontend/templates/ff/paging.phtml
@@ -10,11 +10,11 @@
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_prev_page.png')) ?>">
             </ff-paging-item>
 
-            <ff-paging-item type="currentLink -2">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink -1">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink" style="font-weight: bold;">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink +1">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink +2">{{page}}</ff-paging-item>
+            <ff-paging-item type="currentLink -2"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink -1"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink" style="font-weight: bold;"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink +1"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink +2"><a href="#">{{page}}</a></ff-paging-item>
             <ff-paging-item type="nextLink">
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_next_page.png')) ?>">
             </ff-paging-item>
@@ -25,12 +25,12 @@
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_prev_page.png')) ?>">
             </ff-paging-item>
 
-            <ff-paging-item type="currentLink -2">{{value}}</ff-paging-item>
-            <ff-paging-item type="currentLink -1">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink" style="font-weight: bold;">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink +1">{{page}}</ff-paging-item>
+            <ff-paging-item type="currentLink -2"><a href="#">{{value}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink -1"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink" style="font-weight: bold;"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink +1"><a href="#">{{page}}</a></ff-paging-item>
             ...
-            <ff-paging-item type="lastLink">{{page}}</ff-paging-item>
+            <ff-paging-item type="lastLink"><a href="#">{{page}}</a></ff-paging-item>
             <ff-paging-item type="nextLink">
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_next_page.png')) ?>">
             </ff-paging-item>
@@ -41,13 +41,13 @@
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_prev_page.png')) ?>">
             </ff-paging-item>
 
-            <ff-paging-item type="firstLink">{{page}}</ff-paging-item>
+            <ff-paging-item type="firstLink"><a href="#">{{page}}</a></ff-paging-item>
             ...
-            <ff-paging-item type="currentLink -1">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink" style="font-weight: bold;">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink +1">{{page}}</ff-paging-item>
+            <ff-paging-item type="currentLink -1"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink" style="font-weight: bold;"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink +1"><a href="#">{{page}}</a></ff-paging-item>
             ...
-            <ff-paging-item type="lastLink">{{page}}</ff-paging-item>
+            <ff-paging-item type="lastLink"><a href="#">{{page}}</a></ff-paging-item>
 
             <ff-paging-item type="nextLink">
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_next_page.png')) ?>">
@@ -58,12 +58,12 @@
             <ff-paging-item type="previousLink">
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_prev_page.png')) ?>">
             </ff-paging-item>
-            <ff-paging-item type="firstLink">{{page}}</ff-paging-item>
+            <ff-paging-item type="firstLink"><a href="#">{{page}}</a></ff-paging-item>
             ...
-            <ff-paging-item type="currentLink -1">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink" style="font-weight: bold;">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink +1">{{page}}</ff-paging-item>
-            <ff-paging-item type="currentLink +2">{{page}}</ff-paging-item>
+            <ff-paging-item type="currentLink -1"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink" style="font-weight: bold;"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink +1"><a href="#">{{page}}</a></ff-paging-item>
+            <ff-paging-item type="currentLink +2"><a href="#">{{page}}</a></ff-paging-item>
 
             <ff-paging-item type="nextLink">
                 <input type="image" class="padd" src="<?= $escaper->escapeUrl($block->getViewFileUrl('Omikron_Factfinder::images/paging_next_page.png')) ?>">
diff --git a/src/view/frontend/templates/ff/suggest.phtml b/src/view/frontend/templates/ff/suggest.phtml
index 95730076..ae2cb9a8 100644
--- a/src/view/frontend/templates/ff/suggest.phtml
+++ b/src/view/frontend/templates/ff/suggest.phtml
@@ -13,21 +13,21 @@
         <div data-container="searchTerm">
             <p class="containerCaption"><?= $escaper->escapeHtml(__('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"><?= $escaper->escapeHtml(__('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"><?= $escaper->escapeHtml(__('Brands')) ?></p>
             <ff-suggest-item type="brand">
-                <span>{{{name}}}</span>
+                <a href="#">{{{name}}}</a>
             </ff-suggest-item>
         </div>
     </section>
@@ -38,7 +38,7 @@
             <ff-suggest-item type="productName">
                 <img data-image="{{suggestions.image}}" />
                 <div class="product-center">
-                    <div class="product-name">{{{name}}}</div>
+                    <a href="#" class="product-name">{{{name}}}</a>
                 </div>
                 <div class="product-right">
                     <div class="product-price">{{attributes.Price}}</div>