Accessible John Travoltage fails in fullscreen on Edge

[EthanWJohnson]

Related to phetsims/tasks#813

On Windows Edge, keyboard navigation when the sim is made fullscreen is completely inoperable and nonfunctional; the fullscreen mode has to be closed with a mouse, upon which keyboard navigation will start working again. I'm not seeing the same behavior on Firefox and Chrome; seems like an Edge specific behavior (which, knowing Edge, isn't surprising at all).

Debug info;
Name: ‪John Travoltage‬
URL: http://www.colorado.edu/physics/phet/dev/html/john-travoltage/1.3.0-dev.20/john-travoltage_en.html
Version: 1.3.0-dev.20 2017-04-05 17:45:45 UTC
Features missing: touch
Flags: pointerEnabled
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
Language: en-US
Window: 1366x661
Pixel Ratio: 1/1
WebGL: WebGL 1.0
GLSL: WebGL GLSL ES 1.0
Vendor: Microsoft (Microsoft Edge)
Vertex: attribs: 16 varying: 15 uniform: 512
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"a707328c","branch":"master"},"axon":{"sha":"f7beced2","branch":"master"},"babel":{"sha":"349f2b73","branch":"master"},"brand":{"sha":"054ca5c3","branch":"master"},"chipper":{"sha":"7c6e001f","branch":"master"},"dot":{"sha":"569939e1","branch":"master"},"john-travoltage":{"sha":"d3c5efa2","branch":"master"},"joist":{"sha":"d11d93da","branch":"master"},"kite":{"sha":"81166ce9","branch":"master"},"phet-core":{"sha":"c5c6c2a8","branch":"master"},"phetcommon":{"sha":"85801e7b","branch":"master"},"query-string-machine":{"sha":"d8a4ff18","branch":"master"},"scenery":{"sha":"e5fadaaf","branch":"master"},"scenery-phet":{"sha":"2cc12884","branch":"master"},"sherpa":{"sha":"ad343771","branch":"master"},"sun":{"sha":"cf75fc6d","branch":"master"},"tandem":{"sha":"cc7876d0","branch":"master"},"vibe":{"sha":"549baf54","branch":"master"}}

[jessegreenberg]

Thanks @EthanWJohnson! this is unfortunate, it looks like tab navigation is generally disabled when in fullscreen mode on Edge.

[jessegreenberg]

@jobara found that since the PDOM is outside of the element that is being requested for full screen, those elements are excluded from tab navigation. When the PDOM is placed in the sim, keyboard navigation works just fine.

Can/should we nest the PDOM inside of the display DOM element?

[jessegreenberg]

Should be fixed in the commit above.

[jessegreenberg]

Ah, except the sim div has aria-hidden attached so nothing will be read by a screen reader. We will need to hide the other content in the sim div.

[phet-steele]

@jessegreenberg you may want to look into this with IE11, I believe I'm seeing the same thing.

[jessegreenberg]

Thanks @phet-steele I will check. I believe the commit above will fix it.

[jessegreenberg]

Just confirmed that dev.20 has no keyboard navigation in IE in full screen mode.

[jessegreenberg]

Keyboard navigation works in IE and Edge in fullscreen mode in master. But in IE in full screen mode, keyboard navigation doesn't loop through the sim, it gets caught somehow.

[jessegreenberg]

It looks like IE is trying to focus an <svg> element when in full screen mode.

[jessegreenberg]

The above commit removes the SVG from the focus order in IE11 full screen mode. Focus does not wrap to the top of the simulation in IE11 when in full screen, but that seems like default behavior, maybe a choice since the address bar is not in view?

[jessegreenberg]

Closing, I have tried on Edge and IE on a few machines, focus as expected in full screen mode.