Missing parent reported for ‘treeitem’ elements while nested group roles

[vvzinuk]

Hello, I’m using jStree(which is tree widget) third party in my project.

After axe-core upgrading to version 4.3.3 it started to trigger ‘Ensures elements with an ARIA role that require parent roles are contained by them’ errors.

Those errors were missing in earlier axe-versions.

The issue could be reproduced using the following scenario:

1. Open jStree demo using the following link https://www.jstree.com/demo/
2. Expand all nodes for Filebrowser demo example.
3. Run Axe testing

Product: axe-core

Actual:

Ensures elements with an ARIA role that require parent roles are contained by them’ errors are triggered for ‘treeitems’

Expectation:

According to ‘tree’ widget specification(https://www.w3.org/TR/wai-aria-1.1/#treeitem ) element with the role ‘treeitem’ require to be nested inside ‘group’ or ‘tree’ element:

A collection of treeitem elements to be expanded and collapsed are enclosed in an element with the group role. Authors MUST ensure elements with role treeitem are contained in, or owned by, an element with the role group or tree.

And for the current example is true.

So, the error shouldn’t be triggered.

And the provided example works well for NVDA and Jaws screen reader as I checked.

Motivation:

Looks that related example is implemented correctly, and triggered error is false positive. Could you take a look if it is false positive case or if there is some gaps in the provided example tree widget roles hierarchy?

axe-core version: 4.3.3

Browser and Assistive Technology versions

For Tooling issues:

• Platform: Windows 10
• Browser: Chrome Version 97.0.4692.71

[straker]

Thanks for the issue. So the problem is that the aria-busy (a global ARIA attribute) on the li element is causing the ARIA role conflict resolution to trigger, which in turn means the li is not role=none but instead retains its original role of listitem. This is why we are flagging a missing parent because the accessibility tree is essentially tree > listitem > treeitem.

[vvzinuk]

Hi @straker, Thanks for your response.

Its true that in some cases this tree can contain aria-busy attribute But I tried to fix this as you suggested and removed aria-busy attribute from li nodes. Though missing parent error was still triggered. Do you happen to know if there is another issue in this case except the aria-busy?

Thanks in advance.

[straker]

The role conflict resolution will trigger for any global ARIA attributes or if the element is focusable (including with tabindex=-1). If none of those are present on the element then it should retrain its role of none/presentation.

[vvzinuk]

I prepared simplified example where all redundant attributes deleted. (no tabindex and no aria attributes on li) But missing parent still triggered As I understand specification, next example is correct. (As the rule that treeitem should be contained in group or tree is not violated) Am I right?

[straker]

I checked and you are correct that this reports missing parent. I'll check to see if this should be the case.

[vvzinuk]

Hi @straker. How are you? Did you had a chance to look at this issue? Thank you.

[WilcoFiers]

We've confirmed the issue. We're going to work on a solution, hopefully for the 4.5 release.

[padmavemulapati]

Validated using latest develop branch code base, aria-required-parent is failing with role=group with role=treeitem and role=menuitem when it is not list but passing when it is list Script:

<div role="list">
    <div role="none">
      <div role="group">
        <div role="none">
          <div role="group">
            <div role="listitem" id="target">Nothing here.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div role="group">
    <div role="treeitem" id="failTreeitem">tree item</div>
  </div>
  
  <div role="menu">
    <div role="menuitem" id="pass12">
      <div role="group">
        <div role="menuitem" id="failMenuitem">menu item</div>
      </div>
    </div>
  </div>