Description of the Change

Improves the accessibility of Orders Autosuggest by:

• Setting aria-activedescendant on the input element, so that selected options are properly read out by screen readers.
• Removing aria-haspopup, which has a redundant announcement and is no longer recommended.
• Adding aria-describedby to the input which points to a hidden element that communicates how to navigate suggestions, as well as the current number of suggestions.
• Changing behaviour so that arrow keys loop within the listbox, rather than returning to the input. This is not ideal, but was necessary to ensure that returning to the input was properly announced.

The results are not perfect. VoiceOver on macOS has a tendency to interrupt itself and the tools to deal with this are limited. Fundamentally I'm not convinced that a combobox is the correct approach to these kind of suggestions, but this is at least consistent with what's being done everywhere else, such as GitHub, and the user experience is great for sighted keyboard and mouse users. More research is needed here.

This PR also changes how the input field is managed by the React app. Previously it was left as-is, and attributes where managed on the input by interacting with the element in useEffect() hooks. Now the input is part of the combobox component and the original input is entirely replaced by the combobox rendered by the React app. This makes development of the component far easier, and will simplify iteration.

Closes #3314

How to test the Change

• See Orders autosuggest foundations #3175.
• A list of suggestions should appear after typing in the Search orders field. Pressing Down should navigate to the first suggestion. Pressing Up should navigate to the last suggestion.
• Pressing Enter while focused on a suggestion should open that order. Holding Command (or Control on Windows) while doing so should open it in a new tab.
• Clicking on a suggestion should open that order. Holding Command (or Control on Windows) while doing so should open it in a new tab.
• When a suggestion is focused, the arrow keys should navigate between suggestions. Passing by the first or last suggestion should loop around to the other side.
• While the suggestion list is visible, pressing the Escape key should close the list. Pressing Escape a second time should empty the search field.
• After closing the suggestion list, pressing either Up or Down should open the list again.
• Tabbing away from the search field should close the suggestion list. Tabbing back to the search field should open the list again.
• The list should not appear if there is no search term.
• If suggestions are available, the hidden $post-search-input-description element should provide instructions that include the number of elements, eg. 3 suggestions available, use the up and down keys to browse and the enter key to open. The word "suggestions" should be properly pluralised based on the number of results.

Changelog Entry

• See Orders autosuggest foundations #3175.

Credits

Props @JakePT

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.