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.
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.
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
ul. Options are anchor tags insidelitags.Target - on the Size filter within the filter dialog
CVS - on the brand filter
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.