Keyboard Nav isn't fully working on Mac 10.13

[jaspearias]

Test Device

MacBook Air

Operating System

MacOS 10.13.6

Browser

Safari

Problem Description

For phetsims/qa#429
When testing the Keyboard Nav the “Exit a dialog” and “Move to previous item” didn't work for me. All others worked just fine for the sim except those two. The “Move to previous item” goes to edit the URL instead of moving to the previous thing I was moving with the keyboard. The “Exit a dialog” doesn't do anything at all.

Visuals

https://drive.google.com/file/d/1T615MuKLyjYrkuu3SrpDfmDPUGz1PcH2/view?usp=sharing

Troubleshooting Information

Name: ‪Gravity Force Lab: Basics‬
URL: https://phet-dev.colorado.edu/html/gravity-force-lab-basics/1.0.0-rc.1/phet/gravity-force-lab-basics_all_phet.html
Version: 1.0.0-rc.1 2019-09-17 19:49:09 UTC
Features missing: touch
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15
Language: en-US
Window: 1440x815
Pixel Ratio: 1/1
WebGL: WebGL 1.0
GLSL: WebGL GLSL ES 1.0 (1.20)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 15 uniform: 1024
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 16)
Max viewport: 8192x8192
OES_texture_float: true
Dependencies JSON: {}

[zepumph]

Thank you for the bug report, and thank you for the visual. That was very helpful.

In general I feel like the "shift + tab" bug may be because of an atypical interaction where you clicked (with the mouse) on a later element, and then tried to shift tab back to a previous element. It does seem that an edge case bug is that clicking on an item in the middle of the sim, and the pressing shift+tab SHOULD go back to the previous element. It does do that for me on windows/chrome. It doesn't in the above clip. I would think only using the keyboard for all navigation feels a bit more natural, and perhaps less buggy.
A. Does shift tab work in the following key sequence: tab, tab, tab, shift+tab?
B. Does shift tab work in the following key sequence: click on a later element, tab, tab, shift+tab?

In regards to exiting a dialog. I wouldn't expect for esc to do anything when highlighting the normal elements in the sim. It should only work to exit out of dialogs. Please experiment with that by opening of the "keyboard help dialog" on the nav bar, or the "about dialog" in the phet menu. When either of those dialogs are open, esc should close it.

[KatieWoe]

I wasn't able to replicate this issue on Jordan, so I also wonder if this has something to do with the settings on a device?

[arouinfar]

Thanks for reporting @jaspearias.

@KatieWoe @zepumph keyboard nav is behaving for me on macOS 10.14.5/Safari. If I click an element to shift my keyboard focus shift+tab still works.

Please experiment with that by opening of the "keyboard help dialog" on the nav bar, or the "about dialog" in the phet menu. When either of those dialogs are open, esc should close it.

Just to add to this, if you open the dialog with the mouse, you'll first need to press tab to move the keyboard focus to the close button before esc will work. However, focus will automatically be on the close button if the dialog is opened with the keyboard.

[zepumph]

Assigning over to @jaspearias for further investigation and specifics on when the bug occurs. Perhaps @KatieWoe can work with @jaspearias if needed.

[KatieWoe]

Discussed with @jaspearias and determined that this was due to the setting where safari requires you to use option +tab/shift+tab unless you change the setting. Not an issue. Closing

[zepumph]

Interesting! Thanks @KatieWoe. Does this setting belong documented in the QA book for a11y or somewhere else? I'm not sure if/how these sorts of "gotchas" are kept track of.

[KatieWoe]

I can add it.