[FIX] website: Restore arrow key navigation in search bar

Issue:
Arrow key navigation for search result items regressed with the
new search bar layout. The previous logic in onKeydown was no
longer triggered due to the updated DOM structure.

Fix:
Introduce a dedicated onSearchResultKeydown handler and wire it
to search result items. The new method restores ArrowUp and
ArrowDown focus management while keeping the existing input
keydown behavior unchanged.

task-5424392

Author: shsa-odoo

addons/website/static/src/scss/website.scss

@@ -2357,6 +2357,10 @@ $ribbon-padding: 100px;
             color: inherit;
         }
     }
+
+    &:focus {
+        background: var(--tertiary-bg) !important;
+    }
 }
 
 ul.o_checklist > li.o_checked::after {

addons/website/static/src/snippets/s_searchbar/search_bar.js

@@ -23,6 +23,9 @@ export class SearchBar extends Interaction {
             "t-on-keydown": this.onKeydown,
             "t-on-search": this.onSearch,
         },
+        ".o_search_result_item": {
+            "t-on-keydown": this.onSearchResultKeydown,
+        },
     };
     autocompleteMinWidth = 300;
 
@@ -197,17 +200,13 @@ export class SearchBar extends Interaction {
             case "Escape":
                 this.render();
                 break;
-            case "ArrowUp":
             case "ArrowDown":
                 ev.preventDefault();
                 if (this.menuEl) {
-                    const focusableEls = [this.inputEl, ...this.menuEl.children];
-                    const focusedEl = document.activeElement;
-                    const currentIndex = focusableEls.indexOf(focusedEl) || 0;
-                    const delta = ev.key === "ArrowUp" ? focusableEls.length - 1 : 1;
-                    const nextIndex = (currentIndex + delta) % focusableEls.length;
-                    const nextFocusedEl = focusableEls[nextIndex];
-                    nextFocusedEl.focus();
+                    const firstResult = this.menuEl.querySelector(".o_search_result_item");
+                    if (firstResult) {
+                        firstResult.focus();
+                    }
                 }
                 break;
             case "Enter":
@@ -216,6 +215,130 @@ export class SearchBar extends Interaction {
         }
     }
 
+    /**
+     * Handle keyboard navigation within search results
+     * @param {KeyboardEvent} ev
+     */
+    onSearchResultKeydown(ev) {
+        const allResults = [...this.menuEl.querySelectorAll(".o_search_result_item")];
+        const currentResult = ev.currentTarget;
+        const currentIndex = allResults.indexOf(currentResult);
+
+        switch (ev.key) {
+            case "Escape":
+                this.render();
+                break;
+            case "ArrowUp": {
+                ev.preventDefault();
+                // Check if current element is in the first row
+                const currentRect = currentResult.getBoundingClientRect();
+                const isFirstRow = allResults.every((el, idx) => {
+                    if (idx === currentIndex) {
+                        return true;
+                    }
+                    const rect = el.getBoundingClientRect();
+                    return rect.top >= currentRect.top - 5; // Allow small tolerance
+                });
+
+                if (isFirstRow) {
+                    // Focus back to input when in first row
+                    this.inputEl.focus();
+                } else {
+                    this.navigateByDirection(currentIndex, allResults, "up");
+                }
+                break;
+            }
+            case "ArrowDown":
+                ev.preventDefault();
+                this.navigateByDirection(currentIndex, allResults, "down");
+                break;
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.navigateByDirection(currentIndex, allResults, "left");
+                break;
+            case "ArrowRight":
+                ev.preventDefault();
+                this.navigateByDirection(currentIndex, allResults, "right");
+                break;
+        }
+    }
+
+    /**
+     * Navigate through search results based on their visual position
+     * @param {number} currentIndex
+     * @param {Array} allResults
+     * @param {string} direction - "up", "down", "left", "right"
+     */
+    navigateByDirection(currentIndex, allResults, direction) {
+        const currentRect = allResults[currentIndex].getBoundingClientRect();
+        const currentCenterX = currentRect.left + currentRect.width / 2;
+        const currentCenterY = currentRect.top + currentRect.height / 2;
+
+        let nextIndex = -1;
+        let bestDistance = Infinity;
+
+        allResults.forEach((el, index) => {
+            if (index === currentIndex) {
+                return;
+            }
+
+            const rect = el.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+
+            let isInDirection = false;
+            let distance = 0;
+
+            switch (direction) {
+                case "down":
+                    if (centerY > currentCenterY) {
+                        isInDirection = true;
+                        distance = Math.sqrt(
+                            Math.pow(centerY - currentCenterY, 2) +
+                                Math.pow(Math.abs(centerX - currentCenterX) / 2, 2)
+                        );
+                    }
+                    break;
+                case "up":
+                    if (centerY < currentCenterY) {
+                        isInDirection = true;
+                        distance = Math.sqrt(
+                            Math.pow(currentCenterY - centerY, 2) +
+                                Math.pow(Math.abs(centerX - currentCenterX) / 2, 2)
+                        );
+                    }
+                    break;
+                case "right":
+                    if (centerX > currentCenterX) {
+                        isInDirection = true;
+                        distance = Math.sqrt(
+                            Math.pow(centerX - currentCenterX, 2) +
+                                Math.pow(Math.abs(centerY - currentCenterY) / 2, 2)
+                        );
+                    }
+                    break;
+                case "left":
+                    if (centerX < currentCenterX) {
+                        isInDirection = true;
+                        distance = Math.sqrt(
+                            Math.pow(currentCenterX - centerX, 2) +
+                                Math.pow(Math.abs(centerY - currentCenterY) / 2, 2)
+                        );
+                    }
+                    break;
+            }
+
+            if (isInDirection && distance < bestDistance) {
+                bestDistance = distance;
+                nextIndex = index;
+            }
+        });
+
+        if (nextIndex >= 0) {
+            allResults[nextIndex].focus();
+        }
+    }
+
     /**
      * @param {MouseEvent} ev
      */