Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<Collapse /> does not apply aria-hidden="true" to not rendered component

See original GitHub issue

When using <Collapse />, items not rendered are not appropriately marked with aria-hidden="true" causing accessibility issues.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

<Collapse in={true}>
  <div>Child of visible collapse</div>
</Collapse>
<Collapse in={false}>
  <div>Child of hidden collapse</div>
</Collapse>

Renders to:

<div class="MuiCollapse-container MuiCollapse-entered" style="min-height: 0px;">
  <div class="MuiCollapse-wrapper">
    <div class="MuiCollapse-wrapperInner">
      <div>Child of visible collapse</div>
    </div>
  </div>
</div>
<div class="MuiCollapse-container MuiCollapse-hidden" style="min-height: 0px;">
  <div class="MuiCollapse-wrapper">
    <div class="MuiCollapse-wrapperInner">
      <div>Child of hidden collapse</div>
    </div>
  </div>
</div>

Expected Behavior 🤔

Second element should render to:

<div class="MuiCollapse-container MuiCollapse-hidden" aria-hidden="true" style="min-height: 0px;">
  <div class="MuiCollapse-wrapper">
    <div class="MuiCollapse-wrapperInner">
      <div>Child of hidden collapse</div>
    </div>
  </div>
</div>

Steps to Reproduce 🕹

https://codesandbox.io/s/still-tree-tmixq?file=/src/App.js

Steps:

Open codesandbox
Inspect the collapse parent, observe that there is no aria-hidden on the not rendered element

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

eps1loncommented, Jun 11, 2020

@karl-run Oh right. But only in JSDOM i.e. when using jest. In a browser they should not be included by ByRole. JSDOM doesn’t fully implement CSS cascade.

0reactions

karl-runcommented, Jun 11, 2020

Because if you have this:

<Collapse in={true}>
  <button>Child of visible collapse</button>
</Collapse>
<Collapse in={false}>
  <button>Child of hidden collapse</button>
</Collapse>

Both buttons will be available in the tree when using byRole

  --------------------------------------------------
  button:

  Name "Child of visible collapse":
  <button />

  Name "Child of hidden collapse":
  <button />

But with aria-hidden="true":

<Collapse in={true}>
  <button>Child of visible collapse</button>
</Collapse>
<Collapse in={false}>
  <div aria-hidden="true">
    <button>Child of hidden collapse</button>
  </div>
</Collapse>

You are not able to look up the hidden element using byRole:

  --------------------------------------------------
  button:

  Name "Child of visible collapse":
  <button />

Even when using { hidden: false } both items are available.

Top Results From Across the Web

<Collapse /> does not apply aria-hidden="true" to not ... - GitHub

Steps: Open codesandbox; Inspect the collapse parent, observe that there is no aria-hidden on the not rendered element.

aria-expanded - Accessibility - MDN Web Docs - Mozilla

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child...

React.js: Component not rendering or showing up at all

When I inspect with the react dev tool the components aren't in the DOM at all. The html to follow has issues that...

Hiding DOM elements - ally.js

For disambiguation we'll use the following terms: Completely hidden: The element is not rendered on screen, not exposed in the accessibility tree, not...

content-visibility | CSS-Tricks

So when the rule is removed, the browser does not have to render the ... have aria-hidden="true" applied to them since the browser...