Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Looking for more maintainers as original repo was archived #1

Open
DanielaValero opened this issue Jul 26, 2019 · 0 comments
Open

Looking for more maintainers as original repo was archived #1

DanielaValero opened this issue Jul 26, 2019 · 0 comments
Labels
help wanted Extra attention is needed

Comments

@DanielaValero
Copy link
Owner

DanielaValero commented Jul 26, 2019

Hello everyone,

The original react-autocomplete was archived on July 2019.

I am sure there are cases where it is not an option to migrate to other libraries, therefore I decided to fork the original repo and publish a new version of the package (which my lack of creativity named: react-autocomplete-2).

The next things I want to do with the lib is:

  • Make accessible to screen readers. Currently is only accessible only with keyboard
  • Update all the dependencies.
  • Ensure that the following UX rules are followed

Auto complete UX

When do the suggestions appear?

  • When the user types one letter

Where do the suggestions appear?

  • Below the field

How does the user select a suggestion?

  • Types the whole word
  • Navigates with keyboard arrows and presses enter
  • Selects the option from the list and presses enter

How does the user close the list?

  • Click outside
  • Select an option
  • Tab (to focus next element)

Accessibility requirements

  • The meaning and usage of the autosuggest must be clear.
  • If possible, the total number of suggestions should be perceivable ("3 suggestions in total" or similar).
  • Proper feedback must be given upon entering a filter ("2 suggestions available for X" or similar).
  • The autosuggest must be operable using both keyboard only and screen reader (with a reasonable interplay of default keys like Tab, Enter/Space, Esc, Arrow keys).

Keyboard Interaction

  • UP and DOWN: Cycles through auto-suggestions and input field.
  • ESC: Close the menu
  • ENTER: Select the currently focused auto-suggestion and close the menu.
  • TAB: Select the currently focused auto-suggestion, close the menu, and move focus to the next focusable element.

Screen reader interaction

  • When the field gains focus an initial instruction is announced.
  • When results are returned the count and instructions are announced.
  • When suggestions are arrowed through they are spoken aloud.
@DanielaValero DanielaValero added the help wanted Extra attention is needed label Jul 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant