remediate sort selection drop-down: interactive controls must not be nested

[rlskoeser]

according to dubbot, we're violating https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

flagged on the sort select trigger

convert to a standard select element and style as able

[rlskoeser]

here's the response from John Jameson:

The Filter button does not expose state, and focus is lost on click, and the dropdown DubBot caught loses focus and is missing needed keyboard interactions. It

The “filters” button should follow a toggle button pattern – aria-expanded states: https://www.w3.org/WAI/ARIA/apg/patterns/button/

The dropdown could either just use a native browser <select> (hecka easiest) or implement a listbox pattern (click opens, arrow keys navigate): https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

You are also reloading the page immediately on change for any of the filters – this causes focus to jump back to “Jump to main content.” A keyboard or screen reader user who wants to set a few different filters will have a frustrating road ahead – click one, tab back to form, click another, tab back to the form…basically, screen reader users prefer a separate submit button when search results aren’t AJAX loaded – see https://www.w3.org/WAI/WCAG21/quickref/#on-input

@blms I thought you had done some work along the lines of the list box pattern, is that partially implemented? What's your estimate in hours for the two options for the sort dropbox?

[blms]

@rlskoeser Thanks so much!

Yes, the list box pattern is partially implemented. I'll need to make sure the roles and interactions are 1:1 with that guideline—such as the list getting focus on click, thus allowing immediate keyboard control. One problem is that when a keyboard user interacts with the list and focuses another option, it actually gets selected and thus refreshes the search results; I suppose instead it should only do that on some kind of keypress (related to John's response about "reloading the page immediately on change for any of the filters"). So I would estimate ~3 hours for that.

I've already spent 1 hour on making it a select element, I would estimate 1-2 more for putting the finishing touches on that and updating any affected unit tests.

Also, if I recall correctly the original DubBot issue was "nested interactive elements," and from a quick glance the only thing I see that matches that is the button inside the summary element. But maybe I'm wrong about what exactly was flagged by DubBot?

[rlskoeser]

I think maybe the nested interactive elements are for the search filters.

I think we should handle the automatic form submission separately — John said that isn't as serious; it's inconvenient but not a blocker.

[rlskoeser]

confirmed fixed on test site by scanning with axe DevTools