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);
        });