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

Accessibility issues with Autosuggest #1860

Open
amesplant opened this issue Aug 13, 2020 · 3 comments · May be fixed by #4064
Open

Accessibility issues with Autosuggest #1860

amesplant opened this issue Aug 13, 2020 · 3 comments · May be fixed by #4064
Labels
enhancement module:autosuggest Issues related to the Autosuggest functionality

Comments

@amesplant
Copy link
Contributor

amesplant commented Aug 13, 2020

Is your enhancement related to a problem? Please describe.
Autosuggest has some A11y issues that should be corrected

Describe the solution you'd like
WCAG Item | fix needed

1.4.11

  • while a focus indicator is present, it is not highly visible and can be improve upon

2.1.1

  • tab should not be used to cycle through list of suggestions (only the up and down arrow should be used to do that)
  • up arrow at the first item of the list should pop the user back into the search box
    autocomplete practices

2.1.2

  • Once the "tab" is used to navigate through the list, the up and down arrow keys no longer work to navigate the list. While technically, the user is not "trapped" and can continue using tab to move focus, it is not a good user experience.

4.1.2

  • while the search input box has a name, "s" is not very descriptive as to what it means in context to the input box

** Additional Notes **

  • when a user tabs out of the autosuggest, presses the esc key or clicks elsewhere, the suggestions dropdown should dissappear
@amesplant amesplant self-assigned this Aug 13, 2020
@amesplant
Copy link
Contributor Author

This will be released in the next update.

@jeffpaul jeffpaul added the Hacktoberfest Issues targeted at contributors participating in the https://hacktoberfest.digitalocean.com/ event. label Sep 29, 2021
@felipeelia felipeelia added module:autosuggest Issues related to the Autosuggest functionality and removed Hacktoberfest Issues targeted at contributors participating in the https://hacktoberfest.digitalocean.com/ event. labels Mar 31, 2022
@JakePT
Copy link
Contributor

JakePT commented Nov 23, 2022

Reviewing the current state of these issues:

while a focus indicator is present, it is not highly visible and can be improve upon

I'm not sure if this has been changed since this issue was created, but currently the selected item is only indicated by a darker grey background that might not have sufficient contrast. A more distinct colour might be ideal. Most accessible examples I can find use a blue background with white text, but this isn't necessarily theme or OS agnostic.

tab should not be used to cycle through list of suggestions (only the up and down arrow should be used to do that)

This seems to have been fixed.

up arrow at the first item of the list should pop the user back into the search box
autocomplete practices

Currently the up arrow on the first item does nothing, so the only way to return to the input is to press Escape, which also clears the input. This still needs to be addressed.

while the search input box has a name, "s" is not very descriptive as to what it means in context to the input box

This is not something the Autosuggest feature has any control over.

The s search box comes from WordPress when using the Search block or widget, and is necessary for the input to function. The user can also add Autosuggest to other inputs, but it has no control over the names of those either.

when a user tabs out of the autosuggest, presses the esc key or clicks elsewhere, the suggestions dropdown should dissappear

This seems to have been fixed.


To summarize:

  • The accessibility of the active state for suggestions could be improved.
  • The behaviour of the arrow keys could be improved.
  • The other items are either already addressed or not within the scope of Autosuggest.

@oscarssanchezz
Copy link
Contributor

It seems the contrast between background and text is sufficient to meet Accessibility standard per some research

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement module:autosuggest Issues related to the Autosuggest functionality
Projects
None yet
5 participants