Eslint-plugin-jsx-a11y: ARIA 1.1 & ARIA 1.0 conflict on combobox with role-has-required-aria-props rule

[n-chardon]

ARIA 1.1 requires an aria-controls attribute on elements with the combobox role. However, in ARIA 1.0, aria-owns is required instead of aria-controls.

ARIA 1.1 states that ARIA 1.0 Combobox is not deprecated:

While using the ARIA 1.1 pattern is recommended as soon as assistive technology support is sufficient, there are no plans to deprecate the ARIA 1.0 pattern.

Therefore, the role-has-required-aria-props rule should not warn about the missing aria-controls attribute:

Elements with the ARIA role "combobox" must have the following attributes defined: aria-controls,aria-expanded (jsx-a11y/role-has-required-aria-props)

[rastersysteme]

In this official example aria-controls is not definied on <div role="combobox"> itself but on the <input> inside of it:

<label 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"
         aria-labelledby="ex1-label"
         id="ex1-input">
  </div>
  <ul aria-labelledby="ex1-label"
    role="listbox"
    id="ex1-listbox"
    class="listbox hidden">
  </ul>
</div>

source: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html

[n-chardon]

The official example uses the ARIA 1.1 specification. However, the ARIA 1.0 specification is still valid, and is the specification that works with current assistive technologies. Source: https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

While using the ARIA 1.1 pattern is recommended as soon as assistive technology support is sufficient, there are no plans to deprecate the ARIA 1.0 pattern.

[rastersysteme]

@n-chardon Yes, you’re right. With my example I want to point out, that this rule

Elements with the ARIA role "combobox" must have the following attributes defined: aria-controls, aria-expanded (jsx-a11y/role-has-required-aria-props)

is not valid for ARIA 1.1 because the element with role="combobox" doesn’t need to have aria-controls anymore. Instead the containing textbox element has to set it.

When the combobox popup is visible, the textbox element has aria-controls set to a value that refers to the combobox popup element.

[jessebeach]

Seems like we finally need to implement an ARIA 1.0/1.1 distinction into the plugin.

[gaurav5430]

from https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html

it seems that the combobox role still has aria-owns
while the aria-controls is on the input

[stanflows]

From this documentation i learnt that it is not necessary to include the aria and aria attributes since they are already implemented in the browser.
Refer here for full details: https://www.w3.org/TR/html-aria/#docconformance

[jessebeach]

@eps1lon updated aria-query to ARIA 1.2. Please follow the recommendation of this plugin from version 6.3.x. The ARIA 1.2 description of combobox is the only one that works.