On my website I am creating a dialog. When this dialog is visible I want to create a focus trap so the user is tabbing inside this dialog until the dialog is closed. I am able to set the tabindex of all items on my page to -1 so they can't be focussed.
But I have one problem. I have an iframe with a webform inside it. The field and submit button inside this iframe are still focusable after I've run my tabindex script. I know this is how it should work (I shouldn't be able to change iframes content) but how can I make sure these items are not focusable when the dialog is visible?
For now I just hide the form (display:none) when the dialog is visible and this is an okay option. But I have the feeling there is a better way and since I'm learning about accessibility I'm curious about what solutions there are for this problem.
Thanks in advance