(keyboard navigation) in Edge, can only tab through browser and navigation bar

[ghost]

Test device:

Hanson

Operating System:

Windows 10

Browser:

Edge 41.16299.15.0

Problem description:

If you don't have your cursor over something you can interact with, or if you don't click on something you can interact with, then the only things you can do with keyboard navigation in Edge are tab through the browser bar and tab through the navigation bar. This is for phetsims/qa/issues/87.

Steps to reproduce:

1. Use keyboard navigation to open Macro Scale screen.
2. Try to tab to the things in the sim that you interact with. (On FF and Chrome, the first thing highlighted is the figure on the left. In Edge, the first thing highlighted is the Home screen button. You should only be able to tab through the navigation bar and the browser bar.) <-- [This phenomenon only occurs when you don't have your cursor hovering over something you can interact with.]
3. Note that clicking on something you can interact with will make keyboard navigation work.
4. Note that starting keyboard interaction when you have your cursor hovering over something will highlight that something. For example, if you have your cursor over the figure on the left, and you press tab to start keyboard navigation, then the figure on the left will be highlighted.

Troubleshooting information (do not edit):

Name: ‪Coulomb's Law‬
URL: https://www.colorado.edu/physics/phet/dev/html/coulombs-law/1.0.0-dev.13/phet/coulombs-law_en_phet.html?accessibility
Version: 1.0.0-dev.13 2018-01-29 22:54:49 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299
Language: en-US
Window: 1280x603
Pixel Ratio: 2.5/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":"928741cf","branch":"master"},"axon":{"sha":"e1350857","branch":"master"},"brand":{"sha":"53cf227b","branch":"master"},"chipper":{"sha":"f616a059","branch":"master"},"coulombs-law":{"sha":"77b8d1e5","branch":"master"},"dot":{"sha":"8d471f40","branch":"master"},"inverse-square-law-common":{"sha":"d135be3b","branch":"master"},"joist":{"sha":"caefa8e2","branch":"master"},"kite":{"sha":"b6071478","branch":"master"},"phet-core":{"sha":"f35ff65e","branch":"master"},"phet-io":{"sha":"59e4fea1","branch":"master"},"phet-io-website":{"sha":"766da99e","branch":"master"},"phet-io-wrapper-classroom-activity":{"sha":"c84e3046","branch":"master"},"phet-io-wrapper-lab-book":{"sha":"ebf7c7dc","branch":"master"},"phet-io-wrapper-sonification":{"sha":"adfff6d0","branch":"master"},"phet-io-wrapper-visualizing-engagement":{"sha":"14150f43","branch":"master"},"phet-io-wrappers":{"sha":"d11aebf6","branch":"master"},"phetcommon":{"sha":"d33be800","branch":"master"},"query-string-machine":{"sha":"485e174e","branch":"master"},"scenery":{"sha":"70cf829b","branch":"master"},"scenery-phet":{"sha":"bd233bf8","branch":"master"},"sherpa":{"sha":"7a6906fd","branch":"master"},"sun":{"sha":"56f146b1","branch":"master"},"tandem":{"sha":"4de02ea3","branch":"master"}}

[jessegreenberg]

Reproduced in rutherford-scattering, this is a general multi-screen problem. Seems like a weird Edge bug. When I resize the browser window without clicking on anything focusable, I am able to tab into the sim elements.

[jessegreenberg]

Could be related to #38 or the fix that was added for that issue.

[jessegreenberg]

I did some google searching to try to find any documentation about an Edge bug like this and happened across this issue:
phetsims/a11y-research#30

HA!

[jessegreenberg]

@lmulhall-phet I believe this is fixed in master can you please verify?

[ghost]

@jessegreenberg It seems to be fixed! Closing.