Aria-required-children violation on role=combobox not valid

[ShawnChenXHC]

Hello, I would like to raise an issue around the aria-required-children violation.

Consider the following example:

<div role="combobox" aria-expanded="true" aria-haspopup="grid" aria-owns="ex-grid">
  <input type="text" aria-controls="ex-grid" />
</div>
<div role="grid" id="ex-grid">
</div>

When I run an aXe test on the above set of elements, the test would fail because of a violation of the aria-required-children check. The details reveal that the check failed because the <input>, having being defined with role="combobox", must have a child with role="listbox".

However, according to the WAI-ARIA guidelines for comboboxes, we can see that aside from listbox, there are three other permitted children roles: tree, grid, and dialog. The above example satisfies this condition because the combobox specifies its popup as being a grid and uses aria-owns to point to the specific grid tied to this combobox.

Looking at the role lookup table inside of the aXe engine, there are no provisions for these alternatives under the combobox section. If I am interpreting the WAI-ARIA guidelines correctly, then I believe this should be updated.

[WilcoFiers]

Fair point. Have you done any testing with assistive technologies to see how well this is supported? I think we'd need to do that first. @Keerthi-Penukonda do you think you could do some testing for us with this?

[Keerthi-Penukonda]

@WilcoFiers , tested the given code snippet with role="listbox" and also with role="grid". In both the cases screen reader behavior is same.
Tested in

1. Chrome - NVDA on Windows
2. Firefox - NVDA on Windows
3. IE - JAWS on Windows
   Please let me know if anything needed.

[marcysutton]

We need to test all of the combinations in our support matrix, there are a few more: https://github.com/dequelabs/axe-core/blob/develop/doc/accessibility-supported.md

[Keerthi-Penukonda]

Below are the screen reader behaviors with different combinations:

JAWS and IE on Windows:

1. With role grid: Screen reader is announcing as “Edit combo use JAWS key+alt+m to move to the controlled element”. To set the value use the arrows keys or type the value.
2. With role listbox: Screen reader is announcing as “Edit combo use JAWS key+alt+m to move to the
   controlled element”. To set the value use the arrows keys or type the value.

NVDA and FF on Windows:

1. With role grid: Screen reader is announcing as “combobox expanded Edit has autocomplete blank” and sometimes announcing as just “Edit”
2. With role Listbox: Screen reader is announcing as “combobox expanded Edit has autocomplete blank” and sometimes announcing as just “Edit”
   Observation:
3. When the user pastes the URL in the address bar and navigates to the field, screen reader is announcing as blank
4. When the user pastes some other URL in the same tab and navigates to the previous page(Our page) by pressing back arrow at the address bar, screen reader is announcing the role properly

VO in Safari on MAC:

1. With role grid: Screen reader is announcing as “Edit text blank”
2. With role ListBox: Screen reader is announcing as “Edit text blank”

VO in Safari on IOS:

1. With role grid: Shows popup double tap to collapse
2. With role ListBox: Shows popup double tap to collapse

TalkBack in Chrome on Android:

1. With role grid: Editbox double tap to enter text
2. With role ListBox: Editbox double tap to enter text

Note: I have not tested with Dragon as I have not worked with it earlier. I will ask any of the SME's who knows 'Dragon' and will update the screen behavior later.

[majornista]

+1

We also need support for [role="combobox"][aria-haspopup="dialog"], which is necessary for Datepicker.

[jeankaplansky]

Release notes updated as of 2/03/2020

[padmavemulapati]

Tried with role="combobox" and child with role="listbox"/"grid"/"tree" /"dialog"
seeing "Needs review(1)" for role="combobox" and child with role="listbox" and for all remianing getting voilation as "Certain ARIA roles must contain particular children" (attached Screenshots below)

[padmavemulapati]

Working for axe-core, will verify the same with axe and attest extensions once axe-core3.5 deployed in devTools.