docs: fix keyboard navigation in search (#12434)

www/packages/docs-ui/src/components/Search/Hits/index.tsx

@@ -126,6 +126,7 @@ export const SearchHits = ({
         "[&_mark]:bg-medusa-bg-highlight",
         "[&_mark]:text-medusa-fg-interactive"
       )}
+      data-group
     >
       {hits.map((item, index) => {
         const hierarchies = Object.values(item.hierarchy)

www/packages/docs-ui/src/hooks/use-search-navigation/index.ts

@@ -65,8 +65,18 @@ export const useSearchNavigation = ({
         // find if there's a data-hit item before this one
         const beforeItem = findPrevSibling(focusedItem, "[data-hit]")
         if (!beforeItem) {
-          // focus the input
+          // check if there's a data-group before this one
-          focusInput()
+          const beforeGroup = focusedItem.parentElement
+            ? (findPrevSibling(focusedItem.parentElement, "[data-group]")
+                ?.lastElementChild as HTMLElement)
+            : null
+          if (beforeGroup) {
+            // focus the last item in the previous group
+            beforeGroup.focus()
+          } else {
+            // focus the input
+            focusInput()
+          }
         } else {
           // focus the previous item
           beforeItem.focus()
@@ -87,6 +97,15 @@ export const useSearchNavigation = ({
         if (afterItem) {
           // focus the next item
           afterItem.focus()
+        } else if (focusedItem.parentElement) {
+          // try to go to next hit in the next group
+          const nextGroupFirstItem = findNextSibling(
+            focusedItem.parentElement,
+            "[data-group]"
+          )?.firstElementChild as HTMLElement
+          if (nextGroupFirstItem) {
+            nextGroupFirstItem.focus()
+          }
         }
       }
     }