Allow using role 'combobox' on a native input element with type="search"

[sethkane]

Expectation:
elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms. Input text and input search should work the same with regards to the aria roles and attributes.

Actual:
When using an HTML5 input type "search" AXE is failing on role="combobox".

Motivation:
A combo box with suggestions can be specifically used for searching a website or other search related activities. The ability to allow the user to start typing with suggestions and to ultimately perform a search would be very useful.

Fails:
<input type="search" name="query" value="" aria-expanded="false" aria-haspopup="true" aria-label="Search" aria-autocomplete="list" id="input_query" role="combobox" placeholder="Search" autocomplete="off">

Passes:
<input type="text" name="query" value="" aria-expanded="false" aria-haspopup="true" aria-label="Search" aria-autocomplete="list" id="input_query" role="combobox" placeholder="Search" autocomplete="off">

Notes:
Says this was fixed as part of #549 but as far as I can tell it still is causing failures.

axe-core version: 3.2.2
axe-devtools: 3.8.0

Browser and Assistive Technology versions
Chrome: 73.0.3683.86 

[WilcoFiers]

There's two answers to that question. Firstly, the HTML-ARIA spec suggests you should not use role=combobox on an input[type=search] element. Combobox is already the implicit role of input[type=search], and implicit semantics should not be used explicitly (according to the W3C spec).

That said, axe-core does allow you to do this, since IMO, there are quite a few use cases for doing so. So I agree with you that this shouldn't fail axe-core. Digging into this a little, axe-core seems to think that the implicit role for input[type=search] is searchbox, rather than combobox, which is incorrect. There are a few other problems with the implicitRole computation method, such as #1398.

[AutoSponge]

type=search inputs have a native list popup. How can you tell when it's open to manage aria-expanded? I think you have to leave the semantics in the name or implement your own from text input.

if you implement your own you can use role=combobox to wrap role=searchbox or role=textbox per the spec.

per aria type=search is role=searchbox.

[DavidMacDonald]

I came across this today also which failed because there is no textbox.

<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-auto-suggest-input_search_id" aria-expanded="false" class="react-autosuggest__container">

<input type="search" value="" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-auto-suggest-input_search_id" class="react-autosuggest__input" id="input_search_id" placeholder="Search on dior.com" aria-label="Search">

<div id="react-autowhatever-auto-suggest-input_search_id" role="listbox" class="react-autosuggest__suggestions-container suggestions-container-empty">

[straker]

There are two ways to implement a combobox:

• ARIA 1.1 where the container element has the role=combobox and contains or owns a child with a role of textbox or searchbox
• Legacy ARIA 1.0 where the textbox element itself has the role=combobox

An input[type=search] may not use the role attribute. Its implicit role is searchbox unless it uses the list attribute, in which case its implicit role is combobox.

So axe is correct to spec to not allow combobox on an input[type=search]. To be spec compliant, you'll either need to move the role=combobox to the container of the searchbox or use the list attribute on the searchbox and not use role=combobox at all.

@DavidMacDonald That is indeed a bug. Another user also noticed that bug and reported in #1688.

[sethkane]

@straker

So I reviewed all the information and I am still confused. If I use the exact example #5 found at https://www.w3.org/TR/wai-aria-1.1/#combobox but change the input type from a text to a search I still see AXE violations.

What I am trying to accomplish is having a combox and on Mobile the user gets the "Search" keyboard. The only way I know how to do that is by using type="search"

Here is the code I am using via AXE and the violation. What is wrong with this code?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div aria-label="Tag" role="combobox" aria-expanded="true" aria-owns="owned_listbox" aria-haspopup="listbox">
<input type="search" aria-autocomplete="list" aria-controls="owned_listbox" aria-activedescendant="selected_option">
</div>
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Zoom</li>
</ul>
</body>
</html>

"Required ARIA child role not present: textbox"

I created a JSBIN for it if you want to see it as well https://output.jsbin.com/quboxiz/ (non functional just used for AXE testing)

[straker]

@sethkane Using an <input type="search"> as a child of the role=combobox is a valid pattern in ARIA 1.1 and was reported in #1688 and has a pending fix in #1708.

[sethkane]

Thank you I will track #1708 Thank you for your help!