Accessibility Improvements to Live Search

[ajaydsouza]

As filed here: https://wordpress.org/support/topic/accessibility-improvements-request-3/

"first issue is the focus order when a user types in the search input field, it popout the suggested link or drop downs, when the user presses the tab key the focus jumps to the list of links that are been suggested, this breaks the Success Criterion 2.4.3 (Focus Order) since most search has the submit or search button next to the field the focus should go directly to the object next to the input search field, a fix would be to keep the focus order correct when usign the tab key or do not focus inside the suggested box by tab instead by arrow keys.

The other issue I see is that this dropdown should be announced to screen readers so I suggest an aria-live=”polite” for this 4.1.3: Status Messages"

[ivcreative]

For the focus out of the box something like this might work in the javascript:

resultsContainer.addEventListener('focusout', function () {
            setTimeout(() => {
            if (!resultsContainer.contains(document.activeElement)) {
                resultsContainer.style.display = 'none';
            }
            }, 200);
        });

[ajaydsouza]

@ivcreative, could you please try the beta release?

https://github.com/WebberZone/better-search/releases/tag/4.1.0-beta1

[ivcreative]

Hi, this is a great improvement.

Focus works great, but there are a few things still to improve, the bsearch-autocomplete-results is not announcing correctly on screen readers the amount of items that it has found, (aria-label="# search suggestions found") maybe change the aria-live from polite to assertive, but it might be the placement. Also, since they are links, it should also announce that it will take them to a new page, for last it should also announce with the search that users have the option listbox and can use arrows up and down here is an example https://codepen.io/m1creative/pen/zxYxLrY

If you have windows you can use narrator the built in screen reader to listen how it works or on mac with voice over.

[ajaydsouza]

@ivcreative

Thank you for this and, in particular, the code!

One thing I'm not sure if I can implement is input: role="combobox" aria-owns="search-autocomplete" aria-autocomplete="both" aria-activedescendant="suggestion-#" portion as the live search hooks into any input search form and then displays the live results.

One thing I do need to check is how I can implement the # search suggestions but I believe that should be a fairly straightforward count (famous last words).