azavea / azavea/echo-locator

Improve trip autocomplete dropdown interactions

Open
#791 1 comment 0 reactions 0 assignees View on GitHub
Low priority nice to have
Dominant language
TypeScript
Stars
2
Forks
5
PR merge metrics
No merged PRs in 30d

Description

Improve dropdown interactions for trip address autocomplete and neighborhood search autocomplete. React-aria components we used to build autocomplete/dropdowns are more tightly constrained than we need and are buggy as a child component within a modal.

Goal of this issue is to clean up how we implement Autocomplete, in readability/maintainability as well as less buggy UI, specifically component should be updated to allow keyboard navigation with more intuitive keyboard selection (enter/tab).

Identify if possible to have Autocomplete dropdown within a modal component (within another modal) using react-aria. If not move forward without using react-aria components. Since headless, might be more efficient to pull in Autocomplete component from different library like Hero-UI (still react-aria under the hood) or shadcn.

Contributor guide

No contributing guide indexed for this repository

Research direction

Locate the trip address and neighborhood search autocomplete components, then reproduce their behavior inside the nested modal. Compare the current react-aria behavior with the desired keyboard navigation and selection using Enter and Tab; done means the dropdown is maintainable and works reliably within the modal.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.