(keyboard navigation) cannot tab through about menu on macOS, Firefox

[ghost]

Test device:

MacBook Air, Early 2015

Operating System:

macOS 10.13.3

Browser:

Firefox 59.0.2

Problem description:

You cannot keyboard navigate through the about menu. If you open up the about menu, the "Terms, Privacy & Licensing" link will be highlighted, but you cannot press tab to get to the other two links. Pressing tab highlights the "X" button in the upper right hand corner of the menu. This is related to phetsims/QA/issues/108.

Steps to reproduce:

1. Keyboard nav to the PhET button, press enter.
2. Keyboard nav to the about button, press enter.
3. Try to keyboard nav through the about menu.

Troubleshooting information:

Name: ‪Resistance in a Wire‬ URL: https://www.colorado.edu/physics/phet/dev/html/resistance-in-a-wire/1.5.0-rc.1/phet/resistance-in-a-wire_all_phet.html?showPointerAreas Version: 1.5.0-rc.1 2018-03-09 23:10:33 UTC Features missing: touch User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/604.5.6 (KHTML, like Gecko) Version/11.0.3 Safari/604.5.6 Language: en-US Window: 1440x736 Pixel Ratio: 1/1 WebGL: WebGL 1.0 (2.1 INTEL-10.30.14) 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: {"assert":{"sha":"928741cf","branch":"HEAD"},"axon":{"sha":"cc053b4d","branch":"HEAD"},"brand":{"sha":"89d28f63","branch":"HEAD"},"chipper":{"sha":"54f17be2","branch":"HEAD"},"dot":{"sha":"0dd6ee8e","branch":"HEAD"},"joist":{"sha":"9ca4cd0a","branch":"HEAD"},"kite":{"sha":"b6071478","branch":"HEAD"},"phet-core":{"sha":"f35ff65e","branch":"HEAD"},"phet-io":{"sha":"d54be499","branch":"HEAD"},"phet-io-website":{"sha":"28284828","branch":"HEAD"},"phet-io-wrapper-classroom-activity":{"sha":"c84e3046","branch":"HEAD"},"phet-io-wrapper-lab-book":{"sha":"ebf7c7dc","branch":"HEAD"},"phet-io-wrappers":{"sha":"ce57c3e2","branch":"HEAD"},"phetcommon":{"sha":"a5a7478c","branch":"HEAD"},"query-string-machine":{"sha":"485e174e","branch":"HEAD"},"resistance-in-a-wire":{"sha":"39b3ad26","branch":"HEAD"},"scenery":{"sha":"ddef8aa5","branch":"HEAD"},"scenery-phet":{"sha":"42b0cff2","branch":"HEAD"},"sherpa":{"sha":"9c6ec322","branch":"HEAD"},"sun":{"sha":"6a7c923a","branch":"HEAD"},"tandem":{"sha":"7f499d9e","branch":"HEAD"}}

[terracoda]

@lmulhall-phet, the user interaction for moving between groups and between group items is to use the Tab key to get to the group (PhET menu in this case) and then use the Arrow keys to navigate between group items. In the case of a vertical menu list, the user uses the UP and Down Arrow keys to move between items, and the Enter key to select an item.

A Tab key press within an open menu, will exit the menu and got to the next focusable item or group of items. In the case of the PhET menu this would most likely be the browser's back button or something in the browser's bar.

[terracoda]

@lmulhall-phet, I just tested with FF Quantum 59.0.2 (64-bit) and Mac OS 10.13.3 and I can navigate the PhET Menu items with Up and Down Arrow keys. The Tab key exits the popped up menu. This is the expected behaviour.

And, I just realized you were talking about the About page, not the PhET menu (sorry). I was able to navigate with the Tab key to all links within the About page using my Mac Book Pro.

Sorry, if I caused any confusion.

[ghost]

@terracoda I think I'm probably using the wrong terminology. I need to make a note of going over all of the terminology, i.e. menu, dialogue, etc., with @phet-steele. @jonathanolson's "helpful terms" in phetsims/QA/issues/99 was really helpful (at least for me).

Anyway, the issue is that once you get to this dialogue (?) you can't tab or use the arrow keys to get to "Translation Credits" or "Third-party Credits"

[ghost]

@terracoda No worries. Like I said, it's important that I learn the correct terminology to avoid confusion in the future. I'm making a note to document correct terminology in the QA Handbook.

[terracoda]

@lmulhall-phet, you are correct. Within a dialog, you should be able to tab to the next link. Strangely, using the current version on PhET Test, I am able to Tab to all the links on the About page using FF and my Mac Book Pro.

And, FYI, you are doing great work :-)

[ghost]

@terracoda Hmm... I'm still having trouble tabbing through all the links on the about page with my MacBook Air. I'm trying to see there some FF accessibility preference that I might need to turn on. I'll test this on another Mac device to see if I can reproduce.

[ghost]

And, FYI, you are doing great work :-)

Thanks so much! I'm trying.

[terracoda]

@lmulhall-phet, on Macs, you do need to turn a keyboard setting on! You find that in Settings/Keyboard/Shortcuts and make sure the All controls radiobutton is checked.

I always forget about that setting. You just need to do it once and it is on. I really do not know why it is not on by default.

[terracoda]

I hope that resolves the issue.

[ghost]

@terracoda That was the issue. I never would have thought it was a Mac setting and not an FF setting as the issue is unique to FF. Anyway, thanks for your help. I'm going to make a note of this! Closing.

[jessegreenberg]

How frustrating. Thanks for getting to the bottom of it @terracoda and @lmulhall-phet. @lmulhall-phet do you think it would be helpful to document in https://github.com/phetsims/QA/blob/master/issue-templates/a11y-rc-test-template.md and https://github.com/phetsims/QA/blob/master/issue-templates/a11y-dev-test-template.md?

[ghost]

@jessegreenberg Perhaps, but there might be a couple more settings/preference items we would want to document as well. The only one I can think of is Safari > Preferences > Advanced > Press Tab to highlight each item on a webpage. It might turn into a laundry list of "if you're using X browser, turn Y preference on." In any case, all of this is going into the QA Handbook.

[jessegreenberg]

Great, sounds good @lmulhall-phet thanks!