| 06:51 | <Ben Ho> | Hello, I'm not sure if this is the correct place to ask but somehow I ended up here 🤣 Question: In MDN .showModal() is defined to be "Interaction outside the dialog is blocked and the content outside it is rendered inert." but when I am using <dialog> inside an Iframe with .showModal(), this is not true. Should I file a new issue in Github for this or am I just misusing it? |
| 07:04 | <Ben Ho> | It seems like what the doc defines as "outside" is nearest <html>, or something similar, so dialog triggered from iframe does not inert content outside of the iframe which gives unexpected focus experience to the user. |
| 07:09 | <Ben Ho> | Tabbing on a page with iframe jumps in and out of the iframe so having partial content(iframe) be inert for a dialog experience seems odd to me. Hopefully, I'm just misunderstanding or using it wrong :D |
| 07:20 | <Ben Ho> | Maybe we need an option in .showModal() to select how far "outside" it should inert? |
| 08:51 | <Domenic> | It sounds like MDN is not very accurate in documenting that method, indeed. We don't allow iframes to interfere with their parent documents in a way such as you're describing, so such an option would not be allowed. |
| 09:45 | <Ben Ho> | What would be a correct way to trigger a dialog from the iframe(that is not a window to another domain)? Example of this would be Storybook-like situation |
| 13:43 | <Domenic> | Sending a message to the top-level frame and asking it to trigger the dialog. |
| 13:43 | <Domenic> | (I don't know what Storybook is.) |
| 17:53 | <janbrasna> | (Storybook is a component / design system library engine, IIRC react-based, with examples of the actual components described shown as iframes, with their own page context with just the library being demonstrated loaded in the document, not the tool's styling/behav…) |
| 17:57 | <janbrasna> |
YMMV but this sounds actually like a very good experience, wrt to isolation — if only the iframe is expected to be "an example", an isolated view, "window to how it would look like", having the modal not interfere with the rest of the Storybook UI, keeping it limited just to the example iframe, that feels like a rather good pattern…? (But yeah, that's just this specific case.) |
| 18:03 | <janbrasna> | Ben Ho: Definitely do open an issue at MDN/content GH and explain your expectations — and that it should clearly state it applies only to the same document. Someone might be able to draft a change hinting at alternatives or linking to places helpful with info about document messaging etc. |