Open
Description
_: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)
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Activity