Description
The role-has-required-aria-props
rule incorrectly flags ARIA 1.1 comboboxes because aria-controls is on the text input and not the parent container with the combobox role.
In the ARIA 1.1 combobox pattern role=combobox
is placed on the parent container instead of the text input like in the ARIA 1.0 pattern. Additionally in an ARIA 1.1 pattern, aria-controls
is placed on the text input instead of aria-owns
. aria-owns
is instead on the parent container.
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
Because of the different pattern between 1.0 and 1.1, the role-has-required-aria-props
complains because the parent container with the role=combobox
does not have an aria-controls
attribute.
For instance, this valid ARIA 1.1 combobox markup fails because the div with role=combobox does not have aria-controls:
<label for="ex1-input"
id="ex1-label"
class="combobox-label">
Choice 1 Fruit or Vegetable
</label>
<div class="combobox-wrapper">
<div role="combobox"
aria-expanded="false"
aria-owns="ex1-listbox"
aria-haspopup="listbox"
id="ex1-combobox">
<input type="text"
aria-autocomplete="list"
aria-controls="ex1-listbox"
id="ex1-input">
</div>
<ul aria-labelledby="ex1-label"
role="listbox"
id="ex1-listbox"
class="listbox hidden">
</ul>
</div>