Guidance for implemention of E-Commerce style filter option narrowing

[bhainesva]

Hello

I'm looking for guidance on the correct way to implement a particular pattern I've seen on e-commerce sites.

Description

On a search page a number of filters are presented to allow the user to refine their search. When one of these filters has a lot of options, there is often a text bar that accepts input and filters the visible options to things that match the input text.

Examples

Some examples in the wild:

• REI - on the Brand filter

  • The input has an associated label element that says "find a brand". The options list is a ul. Options are anchor tags inside li tags.

• Target - on the Size filter within the filter dialog

  • The input has an associated label element that says "search size". There's no particular markup for the list of options. Options are checkbox inputs.

• CVS - on the brand filter

  • The input has aria-label="Find a Brand". There's no particular markup on the option list. Options are divs with role="checkbox" and aria-label/aria-checked attributes.

Discussion

Some of these choices don't seem ideal to me, for example CVS's usage of anchors for options or Target not putting the options in a list which means there's no easy way to tell how many options match the current filter text. But I'm not sure what a correct implementation would look like.

To me the functionality here feels similar to a combobox but I don't know if the fact the options are always visible precludes its usage. I may be reading too much into it but the APG and WAI-ARIA both consistently refer to suggestions as being in a "popup". The APG says "The popup is hidden by default, i.e., the default state is collapsed." WAI-ARIA says "Typically, the initial state of a combobox is collapsed." which is less prescriptive but still implies a collapsed state is possible.

Some other alternatives I've considered are a "search" role, which I think is incorrect because we don't want a landmark, or using aria-controls.