argyleink / gui-challenges

Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.

Home Page:https://youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dialog demo inert oddities

scottaohara opened this issue · comments

just making this issue per what i mentioned on twitter, where i noticed that when using VO+Safari (latest release) i could escape the modal dialog and access one of the buttons in the primary doc.

this may have something to do with the modification of the display property of the dialog, or something to do with the JS, as taking the same exact markup without the extra scripting/styling, I cannot recreate the issue at all.

Might be worth adding a note about how modifying the default behaviors of dialog - modal or not - would require testing to ensure things don't break - particularly for a11y.

i tried to reproduce the issue in Safari 16.4 and couldnt get VO to go behind the dialog? Can you help me reproduce the issue? i'm curious if it's a bug in inert, since that's the build-in property that should be isolating focus to the top-layer dialog.

I think you may be correct and I apologize. I was not using the latest release of Safari when I had tested. I had just updated Safari on my primary mac - but I had tested on my macbook which was a few point releases behind.

So, still not sure what the underlying issue was here, since testing without the modifications worked without issues - regardless of Safari version. But with latest Safari, I can confirm I cannot repro, as you were stating. Guess this can be closed then if you don't want to make any mention of legacy Safari/VO issues with the pattern.