[material-ui][Dialog] Error message when closing a Dialog

[Mojacko]

Steps to reproduce

Link to live example: (required)

Steps:

1. open a Dialog component
2. close a Dialog component
3. check console and there will be a error saying this:

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

Current behavior

There is a error closing Dialog Component I've also tried it in the Documentation of Dialog Component and I'm still getting that error message in the console. Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

Expected behavior

There shouldn't be any error closing dialog component

Context

No response

Your environment

No response

Search keywords: MUI Dialog, Aria-hidden

[wildwind2000]

This problem has also troubled me for a long time and has not been resolved yet

[mnajdova]

Can you create sandbox and provide exact steps (e.g. how do you close the Dialog). I tried replicating the same on https://mui.com/material-ui/react-dialog/#introduction and there is no console error.

[wildwind2000]

If the event of displaying a dialog is generated from a button, it will cause the above problem when closing the window. But if the display window is triggered by clicking div, this problem will not occur. Example: <div onclick={()=>handleClickOpen()}>Test</div> There's no problem with that

This will cause problems <Button onClick={()=>handleClickOpen}>Test</Button>

[mnajdova]

@wildwind2000 can you please create a codesandbox, again https://mui.com/material-ui/react-dialog/#introduction uses a button, but I can't see the error.

[LikeDreamwalker]

I have met the same issue and didn't understand why. For my scenario, I was building an MUI component that would be attached with the React Portal, but for some reason, when I imported it directly, this issue happened. When I use React Portal, this issue happens still. I checked my project, and the other buttons work fine, but only this button can cause this issue; when I checked the code, I didn't find any weird parts. This is not a reproductive demo but the code I am working with, hope it can help:

"use client";
import { ReactNode } from "react";
import { useLocale } from "./locale";
import {
  Backdrop,
  Box,
  Button,
  Card,
  CardContent,
  Slide,
  Typography,
} from "@mui/material";

import { loginFinishFunc } from "../../../next/index";

type Props = {
  locale?: string;
};

type LoginWrapperProps = {
  children?: ReactNode;
};
function LoginWrapper({ children }: LoginWrapperProps) {
  return (
    <>
      <Card
        sx={{
          display: { xs: "none", sm: "flex" },
          width: "60vw",
          height: "60vh",
          borderRadius: 6,
          boxShadow: 12,
          p: 2,
        }}
      >
        {children}
      </Card>

      <Slide direction="up" in mountOnEnter unmountOnExit>
        <Card
          sx={{
            display: { xs: "flex", sm: "none" },
            width: "100vw",
            height: "80vh",
            borderRadius: 6,
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
            boxShadow: 12,
            position: "fixed",
            bottom: 0,
            left: 0,
            transform: "translateX(-50%)",
            p: 1,
          }}
        >
          {children}
        </Card>
      </Slide>
    </>
  );
}

export default function LoginComponent({ locale }: Props) {
  const localeObj = useLocale({ locale: locale || "" });
  setTimeout(() => {
    loginFinishFunc({
      isLogin: true,
      token: "token",
      uid: "uid",
      appid: 10000,
      userInfo: {},
      authorizeInfo: {},
    });
  }, 2000);
  return (
    <Backdrop
      sx={{
        bgcolor: "#00000033",
        backdropFilter: "blur(3vw)",
        zIndex: (theme) => theme.zIndex.drawer + 1,
      }}
      open
      // onClick={handleClose}
    >
      <LoginWrapper>
        <CardContent>
          <Typography variant="h4" component="div" sx={{ fontWeight: 700 }}>
            {localeObj.title}
          </Typography>
          <Box
            sx={{
              display: "flex",
              justifyContent: "flex-start",
              alignItems: "center",
            }}
          >
            <Typography variant="h6" color="text.secondary">
              {localeObj.subtitle}
            </Typography>
            {/* Click this Button can cause the aria-hidden issue */}
            <Button variant="text" color="primary">
              <Typography variant="h6">{localeObj.subtitleButton}</Typography>
            </Button>
          </Box>
        </CardContent>
      </LoginWrapper>
    </Backdrop>
  );
}

[wildwind2000]

I have resolved the issue that occurred on my machine. I closed all browser extensions, then closed the browser, reopened it, and then enabled these extensions again, and miraculously solved the problem. I think it may be caused by some browser extensions.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[Tasin5541]

Facing the same issue. It does not occur every time though which makes it harder to reproduce.

[LikeDreamwalker]

Please re-open it if it's possible

[Zxilly]

https://codesandbox.io/s/9vnxjy?file=/src/Demo.tsx can reproduce this error. Open the link and open the rendered page in a new tab. While dialog disappeared, the error was printed to the console. I'm using Edge 127.0.2651.86

[Zxilly]

I tried to reproduce it with many browser, here's the result

Browser	Result
Edge 127.0.2651.86	Yes
Edge Dev 128.0.2739.5	Yes
Chrome 127.0.6533.89	No
Chrome Canary 129.0.6639.0	No
Firefox 128.0	No

I believe this is only reported in Edge.

[LikeDreamwalker]

https://codesandbox.io/s/9vnxjy?file=/src/Demo.tsx

I tried your case, and on Chrome 127.0.6533.89, I can reproduce the issue. But since I installed Chrome just now, so this issue can be confirmed that it is not related to any browser extensions. By the way, for my workaround case, I can see the error on both Chrome and Edge.

[Zxilly]

I can't reproduce it on Chrome, can you describe what you do?

[LikeDreamwalker]

I can't reproduce it on Chrome, can you describe what you do?

I opened your demo in the new window, and the link is https://9vnxjy.csb.app/ I just tried again, and I can still reproduce it; if this link can't reproduce on Chrome, there might be some issue with my environment.

[wildwind2000]

A newly opened browser usually does not have any problems, regardless of whether there are plugins or not. After a period of time, problems may occur, which could be half an hour or several hours. Chrome and Edge will both appear. My system is Windows 11.

[Zxilly]

I searched the chromium code base, it was just introduced by https://source.chromium.org/chromium/chromium/src/+/62d86ddddc8fad157321e42e2acdb18b6ebba951

[mtr1990]

On MUI's https://mui.com/x/react-date-pickers/date-picker/ with MobileDatePicker

In incognito and normal mode (Chrome version 127.0.6533.89)

[LikeDreamwalker]

I searched the chromium code base, it was just introduced by https://source.chromium.org/chromium/chromium/src/+/62d86ddddc8fad157321e42e2acdb18b6ebba951

Just wondering, in my scenario, not all the buttons can reproduce this error. Does Mui need to support this feature? @mnajdova Please consider to re-open this issue🙏

[Zxilly]

While there's a :focus element in the sub-tree of aria-hidden:true element, this warning will show.

While focus on a aria-hidden:true element, this warning will show.

I think this was caused by some race condition while modal manager remove the modal.

I'm writing a patch. I'll submit a PR once I resolve it.

[lrphael]

same issue, but to me, that's happen when I try edit some input inside the modal

[vicasas]

Hello! I am facing the same problem for the following use case:

I have an IconButton with an svg icon that I opened a dialog, when I close it, then the error appears in the console.

<IconButton
  aria-label="open search dialog"
  onClick={handleClickOpen}
  sx={{ display: { xs: 'inline-flex', md: 'none' } }}
>
  <SearchOutlinedIcon />
</IconButton>
<Dialog open={open} onClose={handleClose}>
  ...
</Dialog>

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

@mnajdova Could we reconsider opening this issue? To replicate the bug in the Dialog docs, it should be necessary to add a button with an icon.

[manage-some]

+1, It's only been happing since few weeks now. I think it's because of some new update to chrome browser

[pain-Medicine]

+1 I am having the same issue. Only occurs when a button is used to close the dialog modal.

[ZeeshanTamboli]

I can reproduce it in the Dialog docs in Chrome browser, but only when I first visit the page and open and close the Dialog. It doesn't happen after refreshing the page. Also, @vicasas, I can't reproduce it with the Icon Button. Check out this StackBlitz.

[vicasas]

@ZeeshanTamboli I checked the StackBlitz, and the error appears in the console after closing the dialog. The error occurs only when the page is opened for the first time (at least that's how I was able to reproduce it using the link). If you close the tab and reopen it, the error will reappear.

[LikeDreamwalker]

@ZeeshanTamboli I checked the StackBlitz, and the error appears in the console after closing the dialog. The error occurs only when the page is opened for the first time (at least that's how I was able to reproduce it using the link). If you close the tab and reopen it, the error will reappear.

I tried and that's real that this aria error will only be called for the first time (and I think is for every aria element which can cause this error), and reload the page won't make them called twice. But reopen the page can see the error again.

[arangurenalonso]

I have the same issue; it works but whe you resize the page the error appears

[ZeeshanTamboli]

I can reproduce the issue in the StackBlitz linked above when I open and close the Dialog the first time. I was checking the StackBlitz console, but the error appears in the browser console. I believe this is a bug in the latest Chrome version because we're not setting aria-hidden on the element that opens the Dialog. We only apply and remove aria-hidden on the modal's direct children elements during open and close. The error is also not reproducible on other browsers.

[Zxilly]

https://source.chromium.org/chromium/chromium/src/+/62d86ddddc8fad157321e42e2acdb18b6ebba951

This is the commit in chromium introduce this warning.

[thejm-12]

I can reproduce the issue in the StackBlitz linked above when I open and close the Dialog the first time. I was checking the StackBlitz console, but the error appears in the browser console. I believe this is a bug in the latest Chrome version because we're not setting aria-hidden on the element that opens the Dialog. We only apply and remove aria-hidden on the modal's direct children elements during open and close. The error is also not reproducible on other browsers.

@ZeeshanTamboli I think the bug has to do with the fact that the <Button> used to open the dialog gets refocused when the dialog is closed. The error states "Avoid using aria-hidden on a focused element or its ancestor". Because the button is refocused and aria-hidden is added to MuiBox-root when the dialog is closed it causes the error.

In my case the following code solved the problem:

function onButtonClick(e) {
    e.target.blur()
    setIsOpen(true)
}

However, the question stands as to why the <Button> is refocused when the dialog is closed.