[Dialog] Accessibility issue when testing dialog with transitions disabled
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When disabling React Transition Group transitions in jest, the aria-hidden="true" keeps showing in the (fake) DOM after opening and closing the dialog. This prevents React Testing Library from selecting elements based on accessibility.
FAIL src/AlertDialog.test.tsx
✕ shows the alert dialog (1233 ms)
● shows the alert dialog
Unable to find role="button"
Ignored nodes: comments, <script />, <style />
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
>
<div>
<button
class="MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeMedium MuiButton-outlinedSizeMedium MuiButtonBase-root css-1rwt2y5-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Open alert dialog
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</body>
20 |
21 | expect(
> 22 | await screen.findByRole("button", { name: "Open alert dialog" })
| ^
23 | ).toBeInTheDocument();
24 | });
25 |
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:187:27)
at findByRole (node_modules/@testing-library/dom/dist/query-helpers.js:101:33)
at Object.<anonymous> (src/AlertDialog.test.tsx:22:18)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/@jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.172 s, estimated 3 s
Ran all test suites.
error Command failed with exit code 1.
Expected behavior 🤔
The elements in the document should be reachable and accessible again after closing a dialog.
Steps to reproduce 🕹
Here is a reproduction repository: https://github.com/volcomix/issue-testing-mui-dialog-without-transitions
Something really weird is that I can't manage to reproduce the issue in codesandbox, so I prefer not to share the link to not confuse the investigation. Let me know if you'd like me to share it in comments.
Context 🔦
We are trying to test interactions with a dialog in jest and to disable transitions in order to speed up the tests. The issue doesn't happen when keeping the transitions enabled.
Your environment 🌎
The issue happens only in jest. Everything works fine in browsers.
`npx @mui/envinfo`
System:
OS: macOS 12.2.1
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
Browsers:
Chrome: 98.0.4758.102
Edge: Not Found
Firefox: 97.0
Safari: 15.3
npmPackages:
@emotion/react: latest => 11.8.1
@emotion/styled: latest => 11.8.1
@mui/base: 5.0.0-alpha.69
@mui/material: latest => 5.4.3
@mui/private-theming: 5.4.2
@mui/styled-engine: 5.4.2
@mui/system: 5.4.3
@mui/types: 7.1.2
@mui/utils: 5.4.2
@types/react: latest => 17.0.39
react: latest => 17.0.2
react-dom: latest => 17.0.2
typescript: latest => 4.5.5
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/AlertDialog.test.tsx and the linked reproduction repository, then inspect the dialog behavior when React Transition Group transitions are disabled in Jest. Trace why aria-hidden="true" remains after closing and verify that the existing accessibility query can reach the button again. Done means the test passes and elements are accessible after closing the dialog without transitions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100