Drawer close triggers an error in Chrome (sometimes)

[nomve]

Describe the bug

When closing the drawer, I can sometimes observe the following error in the console.

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: button
Ancestor with aria-hidden:  <div part=​"panel" class=​"drawer__panel" role=​"dialog" aria-modal=​"true" tabindex=​"0" aria-hidden=​"true" aria-labelledby=​"title">​flex<!--?lit$790917313$--><header part=​"header" class=​"drawer__header">​…​</header>​flex<slot part=​"body" class=​"drawer__body">​…​</slot>​<footer part=​"footer" class=​"drawer__footer">​…​</footer>​</div>​

To Reproduce

Steps to reproduce the behavior:

1. Use Chrome (at least thus far only reproduced there)
2. open the drawer
3. close the drawer
4. from time to time the bug will appear

Demo

https://shoelace.style/components/drawer

Screenshots

Browser / OS

• OS: Mac (possibly others)
• Browser: Chrome
• Browser version: 131.0.6778.86

[nomve]

the issue appears to be a child element that still has focus, so the error gets thrown when drawer attempts to set aria-hidden="true"

seems to be fixed with document.activeElement?.blur() when setting open to false on the drawer. ymmv

[chdenat]

Got the same on my app where I'm using a lot of drawers.

Thanks @nomve for the workaround, I can confirm that it fixes the problem.