[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.

[vicasas]

@thejm-12 As I understand it, the current behavior of focusing the button when closing the dialog is a totally expected behavior, in fact WAI ARIA indicates that for modals this way is how it should work.

See: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/

[ZeeshanTamboli]

The error states "Avoid using aria-hidden on a focused element or its ancestor"

Thanks for highlighting the ancestor part—it really helped clarify the issue.

I think the bug has to do with the fact that the used to open the dialog gets refocused when the dialog is closed. Because the button is refocused and aria-hidden is added to MuiBox-root when the dialog is closed it causes the error.

This behavior is expected, as @vicasas mentioned. Also, there's no Box element in any of the examples.

---

As pointed above, aria-hidden is applied to the ancestor of the Button (or any element that opens the Dialog), in this case the root app div, which is a child of the body container. This attribute is set when the Dialog opens and removed when it closes which makes sense. What's happening is that the Dialog's close transition occurs before it fully closes. Since the Dialog doesn't close immediately, there's a delay in removing aria-hidden, and during that time, Chrome still sees aria-hidden on the root div wrapping the button and throws the error.

If you set the closeAfterTransition prop of the Modal to false (it's enabled by default in Dialog), the error disappears because the Dialog executes onClose immediately before transition, removing the aria-hidden attribute without delay. You can see this in action here. The error does not appear. However, this is just a workaround, not a solution.

Given that we're correctly removing aria-hidden, I think it's best to ignore this error since there's nothing more we can do from Material UI side.

[thejm-12]

The error states "Avoid using aria-hidden on a focused element or its ancestor"

Thanks for highlighting the ancestor part—it really helped clarify the issue.

I think the bug has to do with the fact that the used to open the dialog gets refocused when the dialog is closed. Because the button is refocused and aria-hidden is added to MuiBox-root when the dialog is closed it causes the error.

This behavior is expected, as @vicasas mentioned. Also, there's no Box element in any of the examples.

As pointed above, aria-hidden is applied to the ancestor of the Button (or any element that opens the Dialog), in this case the root app div, which is a child of the body container. This attribute is set when the Dialog opens and removed when it closes which makes sense. What's happening is that the Dialog's close transition occurs before it fully closes. Since the Dialog doesn't close immediately, there's a delay in removing aria-hidden, and during that time, Chrome still sees aria-hidden on the root div wrapping the button and throws the error.

If you set the closeAfterTransition prop of the Modal to false (it's enabled by default in Dialog), the error disappears because the Dialog executes onClose immediately before transition, removing the aria-hidden attribute without delay. You can see this in action here. The error does not appear. However, this is just a workaround, not a solution.

Given that we're correctly removing aria-hidden, I think it's best to ignore this error since there's nothing more we can do from Material UI side.

Your solution works great, thanks

[NGFHK]

If you set the closeAfterTransition prop of the Modal to false (it's enabled by default in Dialog), the error disappears because the Dialog executes onClose immediately before transition, removing the aria-hidden attribute without delay. You can see this in action here. The error does not appear. However, this is just a workaround, not a solution.

Given that we're correctly removing aria-hidden, I think it's best to ignore this error since there's nothing more we can do from Material UI side.

The warning is triggerable if one performs the following actions in order quickly (using the demo above):

1. press ESC (assuming disableEscapeKeyDown is false)
2. press the background of the dialog (the backdropClick event) before the dialog is actually closed

Anyway, thanks for the workaround!

[zuinl]

Also getting this error over here on Chrome. A Button component opens a Dialog and when the Dialog closes, we get the error on browser console. @ZeeshanTamboli workaround helped.

[avishekdr]

This error is also coming in Angular Material