search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.07k stars 1.26k forks source link

[data grid] aria-hidden warning on Dialog closes for first time if cell of data grid trigger dialogue open #14686

Open KishorJena opened 4 hours ago

KishorJena commented 4 hours ago

Steps to reproduce

Link to live example: (required)

Steps:

  1. Create a React application using Material-UI
  2. Implement a DataGrid with a view button that opens a Dialog
  3. Load the page and open the Dialog for the first time
  4. Observe the console for the aria-hidden warning
  5. Close and reopen the Dialog
  6. Note that the warning does not appear on subsequent opens

Current behavior

On the first render after a page reload, opening the Dialog triggers an aria-hidden warning in the console. Subsequent opens do not trigger the warning.

Expected behavior

The Dialog should open without triggering any accessibility warnings related to aria-hidden attributes.

Context

No response

Your environment

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.58 @mui/core-downloads-tracker: 6.0.2 @mui/icons-material: ^6.0.2 => 6.0.2 @mui/lab: ^6.0.0-beta.9 => 6.0.0-beta.9 @mui/material: ^6.0.2 => 6.0.2 @mui/material-nextjs: ^6.0.2 => 6.0.2 @mui/private-theming: 6.0.2 @mui/styled-engine: 6.0.2 @mui/system: 6.0.2 @mui/types: 7.2.16 @mui/utils: 6.0.2 @mui/x-data-grid: ^7.15.0 => 7.15.0 @mui/x-internals: 7.15.0 @types/react: 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: 5.4.5 ```

Search keywords: aria hidden, data-grid, dialogue,

michelengelen commented 3 hours ago

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼