Skip to content

Accessibility backlog: Add keyboard navigation #1823

Open
@alcercu

Description

@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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @alcercu

        Issue actions

          Accessibility backlog: Add keyboard navigation · Issue #1823 · kleros/kleros-v2