Accessibility issues with Autosuggest

[amesplant]

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]

This will be released in the next update.

[JakePT]

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.