A11y Semantics for bottom bar in single and multi-screen sims

[terracoda]

See #25 for historical discussion.

In March 6th Keyboard Nav Meeting, we decided to re-structure the bottom bar to better communicate the function/role of the bottom bar and to better communicate access to sim screen buttons in multi-screen sims.

@terracoda will post new HTML here and we can discuss any further code or design changes here.

[terracoda]

Using Build and Atom as an Example:

• Multi-screen Sim Example

[terracoda]

I updated the actual template files.
Will add 2 more examples to see what semantics we hear on the phet menu items.

Note added June 20: I am not adding any more examples. The multi-screen sim example is being reviewed.

[terracoda]

Adding links to the template files:
Template Example:

• Home Screen Template
• Screen 1 Template

[terracoda]

I have created a Design Pattern for multi-screen sims in joist. I used code from these mock-ups buyt have iterated a little bit.
I will update these mock-ups once the design patterns is ok'd by the team.

[terracoda]

Mark down file for the Home Screen is in joist/doc/HomeScreen.md

[terracoda]

@zepumph, I have updated the index.html file in the baa-screens folder. I have put all the sim content on one page, so everything can be seen together.

FYI, I put horizontal rules in between sim screen.

• Multi-screen Sim Example

Note that the code validates with warnings about the multiple H1 elements, and the JS that is supposed to collapse and expand the PhET Menu is not quite right. I'm not sure why it works for one button, but not the other.

[terracoda]

When on git hub, the javascript for the PhET Menu does not work on either PhET Menu button.

[terracoda]

The example in #94 (comment) is updated, and awaiting review by team.

[terracoda]

Reminder, that I will need to add the Global Mute Sound button at some point before September.

[zepumph]

This issue is quite stale, likely the bottom bar is looking really good for single screen sims, since we have published a few already. Unassigning myself until work continues for multi-screen sims and my feedback and time is needed.

[terracoda]

I will double check what has been implemented and see if anything is missing. True, the bottom with mute sound, keyboard shortcuts, and PhET menu has been working fine for people thus far.

[terracoda]

We have designed the multi-screen sim for Ratio and Proportion.

We can use the sim as a good pattern. The buttons were updated to work well with desktop screen readers and mobile VoiceOver.

Here are screen shots of the final Home Screen, Discover Screen and Create Screen for Ration and Proportion.
The A11y View text shows that when changing screens, focus starts at the top. On the Home Screen, I just happen to have my focus on the first screen button.

[terracoda]

Oh this might not be the right issue for the previous comment.

[terracoda]

Moving previous comment it #104

[jessegreenberg]

#94 (comment) look great! This issue was also about the navigation bar, is there anything else to do for that or can this issue be closed now?

[terracoda]

And just an FYI, I updated https://github.com/phetsims/joist/blob/master/doc/HomeScreen.md to include Ratio and Proportion as one of the examples.