Question: menu/menuitem vs. listbox/option (or something else?) for filter/sort pattern

[grelas]

I'm looking for some guidance on which accessibility pattern to use for a filter/sort dropdown menu.

For example, a page where there is a section of user-submitted reviews where there is a sort dropdown - e.g. Sort by: [Most Recent|Top Reviews|etc]. When a user clicks one of the sort options, the section automatically updates with the sorted reviews. The user does not have to click on a "Apply filter" button to update the content.

Here's a visual example:

Amazon implements this pattern with listbox / option roles - similar to that of a <select> element. However, combing across other popular sites (e.g. Google), I've seen this pattern implemented with menu / menuitem or menuitemradio roles.

I apologize in advance if this is covered somewhere, but what types of conditions should we be looking for to decide when to use a menu over listbox? Is it based on the intent/purpose of the individual items? the context in which it is used - e.g. within a form?

[JAWS-test]

• listbox + option for the whole element would be wrong, because this corresponds to a selection list (select size >1) and not to a dropdown (select size=1). If, then a select-only combobox with which a listbox is opened would be correct. Pattern: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
• for the same reason a menu for the whole element would be wrong. Correct would be a button with aria-haspopup=menu, which opens a menu. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/

But now to the actual question of which of the two variants to use. I think the two variants I mentioned are correct, but I would prefer a button that opens a menu, because

• a dropdown is in itself a form element and is used to select a value, which is then submitted with a submit button. But in your example there is no submit button, but the function is triggered immediately
• a button (with or without menu options) is an element that triggers functions immediately - therefore it would be more appropriate

[grelas]

Great points @JAWS-test!

I think I initially got the role of listbox a bit mixed up with "dropdowns" since listboxes can visibly display more than 1 option (i.e. by default its not collapsed). The slightly more correct control here would be a "Collapsible Dropdown Listbox" - which is deprecated in favor of the one you suggested - https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html.

So based on your points, implementing either of these patterns would work here:

• Select-only Combobox: combobox for the trigger, that controls a listbox with options with role option
• Menu Button: a button for the trigger with aria-haspopup="true", that controls a menu with menuitem/menuitemradio items. On option click, update the button text with the selected option - e.g. "Top reviews".

Just to clarify, because we're not within a proper <form> where we need to hold the value of selected filter option, the Menu Button would be more appropriate here.

I guess one other difference between the two here would be that with the Select-only Combobox, you can mark the control as "required" (alongside a required label), which would make sense in a proper form scenario.

Would love to see more examples/docs "Use Cases" for patterns as I find it difficult to differentiate many of these similar (but different) components!

For example, something like this diagram from https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/ which would have an associated ARIA pattern:

Anyway, I'll close this for now but feel free to add any additional thoughts. Thanks for your help 👍

[grelas]

@JAWS-test Curious then in the following example taken from https://www.deque.com/company/careers/ - where selecting an option from one of the dropdowns does NOT automatically update the content of the page. And instead, you have to click "Filter" to apply the selected filters.

Would then a Select-only Combobox make the most sense here?

[JAWS-test]

Would then a Select-only Combobox make the most sense here?

Yes, in that case I would use select size=1 or select-only comboboxes - just because of the fact that there is a submit button

[JAWS-test]

Funny how Deque's elements are wrong when they should know how to do it right. They are using listbox which also don't have proper labels. Also, they use aria-haspopup on the listbox, which is no longer allowed with ARIA 1.2...