Modal focus trap gets broken by having an iframe as the last element in it

[Anschur]

Bug Report

• Package version(s):
  • office-ui-fabric-react: "5.49.3"
  • react: "15.4.2"

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected:

• SP Home Search (Modal used for the preview that appears when clicking on a office file result)

Describe the issue:

I have a Modal with various click-targets inside it. With keyboard navigation I can tab between the different click/tab-targets. In the modal I also have an iframe, but this will not be included in the tab-order by default. If I set tabindex=”0” on the iframe, the iframe will be included in the tab-order. BUT this will break the FocusTrap on the Modal to also include tab targets in the browsers command bar. So, I can tab into the iframe and reach the tab targets there, but when tabbing out of the iframe the first tab-stop will be in the browser command-bar (“Tabs you’ve set aside” for Edge). This only happens if the iframe is the last tab-target in the Modal. If there are tab-targets after the iframe, the tabbing works fine and wraps around inside the modal.

Actual behavior:

Tabbing inside a Modal with an iframe as the last element will also include tab-targets of the browser command bar.

Expected behavior:

Tabbing in a Modal should only cycle between tab-targets inside the Modal (even with an iframe at the end)

[KevinTCoughlin]

The tab experience on that page isn't clear to me, but have you tried setting the iframe's tabindex to -1 if you want to avoid it tabbing? Maybe I'm not fully understanding the expected behavior here, if so my apologies.

[Anschur]

I DO want to have the iframe in the tab-order, so setting tabindex to -1 is not a solution. Normal behavior in a Modal is to have tab only move between the tab-targets that are inside the modal - and that is what I would like. But if the last element in the Modal is an iframe that is a tab-stop, tabbing will take you out of the modal and move on to tab-targets that are on the "command-bar" of the actual browser. So you would have to tab through the URL input++ in order to get back to the modal. As a work around I have now added a button after the iframe. Since this button is a tab-target and is after the iframe, tabbing will then stay put inside the modal, and not move on to the browser bar.

[michaelangotti]

@dzearing Can any of your (new) team look at this?

[JasonGore]

@Anschur Is this still an issue for you? If so, could you try setting data-is-focusable attribute on the iframe to see if that changes behavior? (I did a similar fix for #5842.)

[kenotron]

Is this still an issue, @Anschur? I saw that you have a "Close" button on the bottom. Is this a button you're trying to get rid of (since this would make the iframe the last component in the modal)?

[Anschur]

Yes, I believe it is still an issue. As we have added the "Close"-button I don't have a live repro for you. I've also experienced something similar in the Panel-component (which also uses a focus zone). We have a ChoiceGroup at the end of the Panel and that will break the focus trap. But if I add a button to the end, the focus trap is working. (But here we actually don't want to trap focus in the panel so I haven't complained ;)

[JasonGore]

@Anschur Which version of Fabric have you seen ChoiceGroup breaking out? ChoiceGroup breaking out of Panel should have been resolved with #5842. If you can repro in a CodePen we should probably break that out as a separate issue. Thanks!

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 5 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!