Keyboard navigation gets "stuck" in some platforms when using an iframe in full screen mode

[jessegreenberg]

So far found in Mac Mojave 10.14, Windows FF and Edge. When using an accessible display in an iframe in full screen mode, tab navigation can get stuck. Copying some comments from the original issue in phetsims/coulombs-law#74 and moving to Scenery because this is a general issue.

Seen in https://phet-dev.colorado.edu/html/resistance-in-a-wire/1.5.0-rc.9/phet/resistance-in-a-wire_en_iframe_phet.html when testing on firefox, though pressing shift + tab would highlight the phet menu and nothing else. This seems to mean it is not coulombs-law specific.

Problem goes away when the dev tools are open.

Wait, this sounds crazy but in FF, it seems related to the popup that FF shows when entering full screen mode. When you first enter full screen mode, FF pops up a little dialog that says "localhost:8080 is now full screen". As long as that is showing, you can tab navigate all you want. Once it disappears, tab navigation in full screen mode is broken.

In FF I added this:

window.setInterval( function() {
  console.log( document.getElementById( 'iframe' ).contentDocument.activeElement );
}, 1000 )

and when focus gets lost, it is printing the "html" element of the iframe document.

On the other hand, in Edge, we are getting

SCRIPT5: SCRIPT5: Access is denied.

EDIT: Edge seems to report this even when focus is working correctly, so it doesn't like #74 (comment) either way. NOt a good test.

[jessegreenberg]

Google searching doesn't show any other reports of this, often browser focus bugs have StackOverflow or related threads. So this may be a scenery problem. Ill try to reproduce in a simple HTML page in full screen mode, and see if that gives us more info. IF it doesn't Ill start looking into workarounds.

[jessegreenberg]

I made this: https://jsfiddle.net/wx9Louhr/2/ and the problem is not IS present in FF.

EDIT: I was accidentally still testing in Chrome. It is also a problem in Edge.

[jessegreenberg]

When navigating in FF in full screen mode, I can see that I am focusing links outside of the test document I created, and then when I reach the last one, focus doesn't go anywhere else.

[jessegreenberg]

Nothing about tab navigation in https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API.

[jessegreenberg]

I haven't been able to find documentation about this or bug reports. Tab navigation doesn't loop on these platforms when basic HTML is the target of full screen, or will include things outside of the iframe.

[jessegreenberg]

This is also probably blocking phetsims/qa#210.

[mbarlow12]

@jessegreenberg could I add the blocks-publication label?

Also, would you like to pair on this tomorrow or Monday?

[jessegreenberg]

Absolutely to both!

[jessegreenberg]

We talked about this in a11y dev meeting today. I think we are ready to proceed with a workaround.

We explored this a bit and tried to reproduce the problem in a JSFiddle in FF. We are thinking that a workaround is the best way to go. We are hoping that we can use event.relatedTarget in AccessiblePeer.blur to detect where focus is going in this case and prevent this behavior.

[jessegreenberg]

We also verified that the problem is only when launching the sim from an iframe.

[jessegreenberg]

From #883 (comment), adding the blocking label, this is a blocking issue for sims that have keyboard navigation and description enabled.

[jessegreenberg]

Adding this to globalKeyListener of AccessibleInstance fixes the problem in FF and IE11:

          if ( FullScreen.isFullScreen() && event.keyCode === KeyboardUtil.KEY_TAB && !event.shiftKey ) {
            var elementIsLast = AccessibilityUtil.getNextFocusable( self.display.accessibleDOMElement ) === event.target;
            if ( elementIsLast ) {
              event.preventDefault();
            }
          }

This fixes tab navigation, though readable things outside of the iframe are still discoverable by the AT. But focus recovers gracefully in this case, and it should be up to the parent of the frame to hide content from AT in full screen mode.

[jessegreenberg]

Focus gets lost in Edge when navigating backwwards, so we should add a similar check navigating backwards.

[jessegreenberg]

This should be fixed with the above commit.

[jessegreenberg]

@KatieWoe verified that this issue has been fixed in the above issue. Closing this one.

[jessegreenberg]

@KatieWoe pointed out an extension of this bug in Edge. When launching full screen mode in Edge from an iframe, if you click outside of the simulation frame, then click with mouse to activate full screen mode, you can't focus anything in the sim, even if you click inside the sim with a mouse.

f you click outside of the simulation frame

This is critical for the bug.

Also @KatieWoe said that if the browser alert dialog that says "Page has entered full screen mode", focus can get stuck in there. There is probably less we can do about this.

[ariel-phet]

@jessegreenberg I think I can make the call here. This is definitely quite an "edge" case especially since edge such low usage of our sims. You need to be in an iframe, in fullscreen, a rare use case. Lets defer for the moment, and continue working on getting this sim out.

[emily-phet]

@ariel-phet Thanks for weighing in. Sounds good to me.

[mattpen]

@jessegreenberg and I will try to start the batch release process for this next week.

[jessegreenberg]

Maintenance releases deployed to a11y sims for the original issue in this thread. We are not fixing the edge bug in #883 (comment), so this issue is complete and we can close.