Accessibility backlog: Add keyboard navigation

[alcercu]

          _:hammer_and_wrench: Refactor suggestion_

Add keyboard navigation for search results.

The search results can only be navigated using a mouse. Consider adding keyboard navigation for better accessibility.

+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!search || filteredCourts.length === 0) return;
+    
+    switch(e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 1, filteredCourts.length - 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 1, -1));
+        break;
+      case 'Enter':
+        if (selectedIndex >= 0) {
+          navigate(`/courts/${filteredCourts[selectedIndex].id}`);
+          setSearch("");
+        }
+        break;
+    }
+  };

   return (
     <SearchBarContainer>
       <StyledSearchbar
         dir="auto"
         type="text"
         placeholder="Search"
         value={search}
         onChange={(e) => setSearch(e.target.value)}
+        onKeyDown={handleKeyDown}
       />
       {search && filteredCourts.length > 0 && (
         <SearchResultsContainer>
           {filteredCourts.map((court, index) => (
             <StyledCard
               key={court.id}
-              selected={court.id === currentCourtId}
+              selected={court.id === currentCourtId || index === selectedIndex}
               onClick={() => {
                 navigate(`/courts/${court.id}`);
                 setSearch("");
               }}
             >

Committable suggestion skipped: line range outside the PR's diff.

Originally posted by @coderabbitai[bot] in #1821 (comment)