Skip to content

[Bug] ARIA 1.1 Combobox markup incorrectly fails #178

Open
@mjlehrke

Description

@mjlehrke

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions