Because you check for display: none, I don't think you need let hidden = el.getAttribute('hidden');, the attribute just has a user agent stylesheet that applies display: none.
In its place, you should add let inert = el.getAttribute('inert'); and (inert !== null). Elements with (or within) aria-hidden="true" are already treated as not visible, even though they are in fact visible and even focusable, hidden only from assistive technologies; this is the right thing to do. Elements with (or within) inert are also hidden from assistive technologies but are not focusable.
Ideally, when a modal dialog is open, this would also check for elements that aren't in the topmost dialog. I think it would need to start with querySelectoryAll('dialog'), checking them for dialog.open == true, then excluding any elements that aren't within an open dialog.
I think it's technically possible to have more than one modal dialog open and everything not in the last opened one is treated as inert but I don't know how a script could know which open modal was opened last without constantly listening to events on the page. Since opening modal dialogs automatically moves focus to them, this probably isn't an edge case that needs to be accommodated.
extra808
commented
3 weeks ago
In the isVisible() function,
display: none, I don't think you needlet hidden = el.getAttribute('hidden');, the attribute just has a user agent stylesheet that appliesdisplay: none.let inert = el.getAttribute('inert');and(inert !== null). Elements with (or within)aria-hidden="true"are already treated as not visible, even though they are in fact visible and even focusable, hidden only from assistive technologies; this is the right thing to do. Elements with (or within) inert are also hidden from assistive technologies but are not focusable.Ideally, when a modal dialog is open, this would also check for elements that aren't in the topmost dialog. I think it would need to start with
querySelectoryAll('dialog'), checking them fordialog.open == true, then excluding any elements that aren't within an open dialog. I think it's technically possible to have more than one modal dialog open and everything not in the last opened one is treated as inert but I don't know how a script could know which open modal was opened last without constantly listening to events on the page. Since opening modal dialogs automatically moves focus to them, this probably isn't an edge case that needs to be accommodated.