Blocked aria-hidden on an element because its descendant retained focus.

[Norlandz]

Im using the
https://jcoreio.github.io/material-ui-popup-state/#cascading-hover-menus

When I click on the item, following error shows.

material-ui-popup-state/:1 Blocked aria-hidden on an element because its descendant retained focus. The 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.
Element with focus: li
Ancestor with aria-hidden:  <div role=​"presentation" id=​"moreChoicesCascadingMenu" class=​"MuiPopover-root MuiMenu-root MuiModal-root css-749mnm" style=​"pointer-events:​ none;​" aria-hidden=​"true">​<div aria-hidden=​"true" class=​"MuiBackdrop-root MuiBackdrop-invisible MuiModal-backdrop css-1lbe2ow" style=​"opacity:​ 0;​ transition:​ opacity 195ms cubic-bezier(0.4, 0, 0.2, 1)​;​ visibility:​ hidden;​">​</div>​<div tabindex=​"-1" data-testid=​"sentinelStart">​</div>​<div class=​"MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation8 MuiPopover-paper MuiMenu-paper css-19cmak4" tabindex=​"-1" style=​"--Paper-shadow:​ 0px 5px 5px -3px rgba(0,0,0,0.2)​,0px 8px 10px 1px rgba(0,0,0,0.14)​,0px 3px 14px 2px rgba(0,0,0,0.12)​;​ opacity:​ 0;​ transform:​ scale(0.75, 0.5625)​;​ pointer-events:​ auto;​ transition:​ opacity 267ms cubic-bezier(0.4, 0, 0.2, 1)​, transform 178ms cubic-bezier(0.4, 0, 0.2, 1)​ 89ms;​ top:​ 536px;​ left:​ 836px;​ transform-origin:​ 0px 0px;​">​…​</div>​<div tabindex=​"-1" data-testid=​"sentinelEnd">​</div>​</div>​

[OrestisIon]

I get the same error. Does anyone know why?

[jedwards1211]

I think the problem is when the submenu closes, it automatically restores focus to the previously focused menu item in the parent menu, but the parent menu is also being closed (as intended when any menu or submenu item is clicked), so Chrome is warning about it. I'll see if I can figure out a reasonable change that prevents the warning

[jedwards1211]

So if I hover on "More Choices" and then click "Cheesecake" I'm not getting this warning. However if I click on "More Choices" I get the warning, then if I click on "Cheesecake" I get another one. Is this different from what you're seeing?

Part of the issue with clicking on "More Choices" is it focuses that menu item but opening the submenu causes MUI to set aria-hidden on the parent menu.

[Norlandz]

@jedwards1211

when the submenu closes, it automatically restores focus to the previously focused menu item in the parent menu, but the parent menu is also being closed

Possibly, not sure.

So if I hover on "More Choices" and then click "Cheesecake" I'm not getting this warning.

No. I do get 1 error.

However if I click on "More Choices" I get the warning, then if I click on "Cheesecake" I get another one.

Yes. I get 2 errors, one on each click.