Implement keyboard nav for the navigation bar

[zepumph]

From phetsims/a11y-research#45, here is a link to the mockup:

http://htmlpreview.github.io/?https://github.com/phetsims/a11y-research/blob/master/html-sketches/sim-screens/template-sim-screen/01-screen-template.html

https://github.com/phetsims/a11y-research/blob/master/html-sketches/sim-screens/template-sim-screen/01-screen-template.html

[zepumph]

I added keyboard nav bigly today to the navigation bar. @terracoda how does this look to you? I like to look at RPAL for a good example since it already has a lot of keyboard nav added. See phettest (phettest.colorado.edu/reactants-products-and-leftovers/reactants-products-and-leftovers-a11y-view.html?brand=phet) or on the dev server (https://www.colorado.edu/physics/phet/dev/html/reactants-products-and-leftovers/1.2.0-dev.3/reactants-products-and-leftovers-a11y-view.html)

Try it out with other sims too!

[terracoda]

@zepumph, this is looking really good. I do however get leftover ghost focus highlights when going from home screen to sim screen and from sim screen to home screen. I also noticed that in the radio group, focus should go to the selected item in the group, not the first or last item depending on direction of tabbing. See screen shots below with visual examples. All three happen in FF and Safari.

Focus Ghost from Home Screen on Sim Screen

Focus Ghost on Home Screen from Sim Screen Navbar

Incorrect focus in the radio group
In this example, I am tabbing backward to the radio group with Shift Tab. The focus highlight should go on the radio which is actually selected, not first or last radio in the group.

[jessegreenberg]

In phetsims/balloons-and-static-electricity @terracoda mentioned

For single screen sims like Balloons and Static Electricity, the label should not include a reference to Sim Screens, and just be "Sim Resources and Tools".

@zepumph could you please work on that adjustment as part of this issue?

[zepumph]

Right, thanks for the reminder.

[zepumph]

@terracoda BASE and other single screen sims should now be restored.

[zepumph]

Home button blur is fixed above, Weird home screen focus bug is to be addressed in phetsims/chipper#622 and the radio button issue is in phetsims/sun#316

@terracoda until chipper 622 is resolved, please try not to use firefox + a11y view + multiscreen simulations. You can use firefox + multiscreen sims directly still. Anything else for this issue @terracoda?

[terracoda]

phetsims/chipper#622 is resolved.

@jessegreenberg, can I close this issue. It looks like @zepumph implemented my mockups.

[zepumph]

Closing, bugs will be addressed in their own issues