Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is aria-expanded not supported by the searchbox role? #1680

Open
Anschur opened this issue Jan 4, 2022 · 9 comments
Open

Is aria-expanded not supported by the searchbox role? #1680

Anschur opened this issue Jan 4, 2022 · 9 comments
Assignees
Labels
clarification clarifying or correcting language that is either confusing, misleading or under-specified
Milestone

Comments

@Anschur
Copy link

Anschur commented Jan 4, 2022

Hi! I've been working an a search box with a suggestion popup, where I have applied the role="combobox". I recently realized that the role="searchbox" is probably more fitting. But on closer inspection it seems that aria-expanded attribute is not supported for this role. Searchbox is not listed as a role supported by aria-expanded, and aria-expanded is not listed as inherited state and properties of the searchbox role, but it is required for the combobox role. The searchbox role do support aria-controls, aria-haspopup and aria-owns. Should the role then not also support to indicate the the controlled popup is expanded?

If this is not the correct forum for this question, please point me in the right direction.

@JAWS-test
Copy link
Contributor

If your search box behaves like a combobox, it should be marked with role=combobox instead of searchbox.
If your search box only has autocomplete, aria-expanded is not needed.

It may also be possible to modify the ARIA specification to allow a searchbox to act as a combobox. This would need to be discussed at https://github.com/w3c/aria

@JAWS-test
Copy link
Contributor

Related: #681

@Anschur
Copy link
Author

Anschur commented Jan 4, 2022

Thanks for your reply @JAWS-test .Yes, it behaves as a combobox in that it has a popup with suggestions below the search box as you type (autocomplete="list"). I'm using the keyboard navigation in the combobox pattern using the aria-activedecendant (supported by searchbox). But screen readers will not identify it as a search box, and I'm currently using the aria-label to inform users of that.
I'm not sure what you mean with "...only has autocomplete" - if using inline autocomplete I see no need for aria-expanded, but with autocomplete="list" I think there is a need as the list is only accessible when expanded (and could also be empty). Do you mean there is no need for aria-expanded independent of the type of autocomplete?

@JAWS-test
Copy link
Contributor

In my opinion there is an important difference between combobox and autocomplete, which is unfortunately often not considered, so that there are many implementations on the web that are badly usable with screen readers, see w3c/aria-practices#1134 (comment).

If no list of values can be opened without text input, but only after text input, then it is not a combobox. Unfortunately, there are no attributes that indicate the fade-in of the list for a textbox or searchbox. Therefore, a live region is usually used for this, see: https://jqueryui.com/autocomplete/

@Anschur
Copy link
Author

Anschur commented Jan 4, 2022

Our search box will usually display suggestions without text input (zero term suggestions), but it depends what suggestions providers are configured and previous actions of the users. But it is not a filtering of a limited number of entries as mentioned in #1134 (comment).
We are relying on aria-live to inform on the number and types of suggestions, but thanks for the tip.
I thought I could apply the role="searchbox" to make it a more specific combobox for search, but that doesn't seem to be the case. I still think it makes sense to follow the combobox pattern for interaction, but I'm not sure what role would be most useful for the end user (or if it would have any significant impact on the experience). And I do find it strange that the searchbox role doesn't support aria-expanded.

@JAWS-test
Copy link
Contributor

This sounds like a edge case: an autocomplete function that displays suggestions without text input. I would advocate not marking it with role=combobox, but as an autocomplete list. If per live region the presence of list entries is output, this should be sufficient.

@Anschur
Copy link
Author

Anschur commented Jan 4, 2022

Zero term suggestions for search boxes are not uncommon, so it is not an edge case in that sense. When I click in an empty search box on google.com I get suggestions from/related to recent searches. They are using role="combobox" for their search box - but I'm not advocating doing the same just because it is highly used search box.

@a11ydoer a11ydoer transferred this issue from w3c/aria-practices Jan 18, 2022
@jnurthen
Copy link
Member

There is certainly a spec issue here:

  • aria-autocomplete is supported on combobox, textbox and searchbox
  • aria-autocomplete says: "When an element has aria-autocomplete set to list or both, authors SHOULD use the aria-expanded state to communicate whether the element that presents the suggestion collection is displayed."
  • aria-expanded is NOT supported on textbox or searchbox

If all of this is correct then the only values which should be allowed for aria-autocomplete on textbox and searchbox are inline or none. If this is correct then we should state this explicitly in the description of aria-autocomplete.

Otherwise aria-expanded should be supported on textbox/searchbox.

@JAWS-test
Copy link
Contributor

If all of this is correct then the only values which should be allowed for aria-autocomplete on textbox and searchbox are inline or none. If this is correct then we should state this explicitly in the description of aria-autocomplete.

textbox and searchbox should not allow only autocomplete=inline/none - otherwise many web pages would be invalid. Most autocompletes use list or both. Thus, the following should be implemented:

aria-expanded should be supported on textbox/searchbox.

@spectranaut spectranaut removed the Agenda label Jun 7, 2022
@jnurthen jnurthen added clarification clarifying or correcting language that is either confusing, misleading or under-specified labels Jun 30, 2022
@pkra pkra added this to the ARIA 1.3 milestone Jun 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
clarification clarifying or correcting language that is either confusing, misleading or under-specified
Projects
None yet
Development

No branches or pull requests

5 participants