Product

axe-core

Product Version

4.7.1

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

If the descendent of an element with required children is removed from the accessibility tree using display: none or visibility: hidden and also uses aria-hidden:"true" it should not raise an aria-required-children issue due to "Element has children which are not allowed".

Actual

If the descendent of an element with required children is removed from the accessibility tree using display: none or visibility: hidden and also uses aria-hidden:"true" it raises an aria-required-children issue due to "Element has children which are not allowed". If visibility: hidden is removed from the child element the aria-required-children issue is not raised.

How to Reproduce

In the following examples a child element uses display: none or visibility: hidden and also uses aria-hidden:"true". In these cases an aria-required-children issue is raised:

<div role="table">
  <div role="presentation">
    <div style="display: none;" aria-hidden="true">
      this shouldn't be in the table
    </div>
    <div role="row">
      <div role="columnheader">Col 1</div>
      <div role="columnheader">Col 2</div>
    </div>
  </div>
  <div role="row">
    <div role="cell">a</div>
    <div role="cell">b</div>
  </div>
</div>

<div role="list">
  <div role="presentation">
    <div style="visibility: hidden;" aria-hidden="true">
      this shouldn't be in the list
    </div>
    <li>item 1</li>
    <li>item 2</li>
  </div>
</div>

The following examples are exactly the same as the previous examples except aria-hidden:"true" is removed from the child elements. In these cases an aria-required-children issue is not raised:

<div role="table">
  <div role="presentation">
    <div style="display: none;">this shouldn't be in the table</div>
    <div role="row">
      <div role="columnheader">Col 1</div>
      <div role="columnheader">Col 2</div>
    </div>
  </div>
  <div role="row">
    <div role="cell">a</div>
    <div role="cell">b</div>
  </div>
</div>

<div role="list">
  <div role="presentation">
    <div style="visibility: hidden;">this shouldn't be in the list</div>
    <li>item 1</li>
    <li>item 2</li>
  </div>
</div>

See Live examples

Additional context

This provided examples in the "How to reproduce" section are simplified examples of issues originally encountered when evaluating this complex grid.