From a70b7efc422e0fbf41fc667812df921c363eeeb1 Mon Sep 17 00:00:00 2001
From: Jonas Lindenskov Nielsen <jonas.lindenskov@criipto.com>
Date: Fri, 30 Jan 2026 23:06:01 +0100
Subject: [PATCH] Search modal: Improve focus state and tab navigation

This commit attempts to improve the focus state of the search modal,
by reducing the amount of "tab" states for each hit entry to 1 (before
there was it took at least two tab-keypresses to navigate to the next
hit). Additionally, the visual design of the focus state has been updated.
---
 src/components/Search.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index f576d10c..c4367e54 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -13,18 +13,20 @@ export const HitComponent = ({ hit, onClick }: HitProps) => {
   const path = `/${hit.slug}/`;
 
   return (
-    <div className="mb-4" onClick={onClick}>
-      <Link
-        to={path}
-        className="block text-xl font-medium text-light-blue-900 tracking-tight mb-0 mt-0 no-underline"
-      >
-        <Highlight attribute="title" hit={hit} highlightedTagName="mark" /> - {hit.category}
-      </Link>
+    <Link
+      to={path}
+      className="block no-underline focus:outline-none focus:bg-light-blue-25 text-light-blue-900 p-2"
+      onClick={onClick}
+    >
+      <div className="text-xl font-medium tracking-tight mb-0 mt-0">
+        <Highlight attribute="title" hit={hit} highlightedTagName="mark" />
+        {Boolean(hit.category) ? `- ${hit.category}` : ''}
+      </div>
 
-      <Link to={path} className="no-underline">
+      <p className="!m-0">
         <Snippet attribute="excerpt" hit={hit} highlightedTagName="mark" />
-      </Link>
-    </div>
+      </p>
+    </Link>
   );
 };
 
@@ -55,7 +57,10 @@ export default function Search(props: SearchProps) {
           </svg>
         )}
       />
-      <Hits hitComponent={({ hit }) => <HitComponent hit={hit} onClick={props.onHide} />} />
+      <Hits
+        classNames={{ item: 'm-0' }}
+        hitComponent={({ hit }) => <HitComponent hit={hit} onClick={props.onHide} />}
+      />
     </InstantSearch>
   );
 }