Update Visual Keyboard Shorcuts dialog

[terracoda]

@arouinfar, based on decisions to create a Grab interaction for the Ruler and 2 jumping keyboard shortcuts in #134, we will need some visual additions to the Keyboard Shortcuts dialog for Gravity Force Lab.

Question:
@arouinfar, based on the current visual design and the red-highlighted additions in the A11y Content in the design document, do you think we need new artwork for this, and if so, do you think you could make a stab at a new visual layout when you have a time?

Here's the link to the Keyboard Shortcuts Dialog section in the design document.

Here's my short hand for the visual content of the dialog:
Keyboard Shortcuts
[Tab] to get started

Move Spheres

• Move sphere [Left Arrow][Right Arrow]
• Move in smaller steps [Shift] + [Left Arrow][Right Arrow]
• Move in larger steps [Pg Up][Pg Down]
• Jump to left [Home]
• Jump to right [End]

Change Mass

• Increase mass [Right Arrow] or [Up Arrow]
• Decrease mass [Down Arrow] or [Left Arrow]
• Change mass in smaller steps [Shift]+ [Up Arrow][Left Arrow][Down Arrow][Right Arrow]
• Change mass in larger steps [Pg Up][Pg Down]
• Jump to minimum mass [Home]
• Jump to maximum mass [End]

Grab or Release Ruler
Grab or release ruler [Space] or [Enter]

Move or Jump Grabbed Ruler

• Move grabbed ruler [Up Arrow][Left Arrow][Down Arrow][Right Arrow] or [W][A][S][D]
• Move in smaller steps [Shift]+ [Up Arrow][Left Arrow][Down Arrow][Right Arrow]
• Jump start of ruler to center of m1 sphere [J]+[S]
• Jump to home position [J]+[H]

Basic Actions

• Move to next item [Tab]
• Move to previous item [Shift]+ [Tab]
• Toggle checkboxes [Space]
• Press buttons [Space]
• Exit a dialog [Esc]

[arouinfar]

@terracoda here's a mockup of the updated dialog contents.

For the Change Mass section, I thought "mass" pretty repetitive. I mocked up this alternative, where the later commands mirror typical slider shortcuts. I think the commands are still clear in this context, but a bit more concise.

[terracoda]

@arouinfar, it looks good except I forgot the WASD keys for the "move grabbed ruler in smaller steps" section, do you think you could squeeze a set of WASD keys them in below the Arrow Keys? It should be like this maybe:

• Move is smaller steps [Shift]+ [Up Arrow][Left Arrow][Down Arrow][Right Arrow] or
  [Shift]+ [W][A][S][D]

Or, however, we did it for BASE's dialog.

The rest I think is good.

[terracoda]

@arouinfar, and I agree the second dialog seems to be less repetitive. I think we could go with that.

[arouinfar]

Here you go @terracoda :)

[terracoda]

Thanks @arouinfar for doing this so quickly. I'll update the accessible content in the design document to match, and assign for implementation!

[terracoda]

@zepumph, the Visual Keyboard dialog and the A11y content for the dialog have been updated in the Design Document.

Please see Keyboard Shortcuts Dialog in design document.

Please implement as you can, likely after you implement the grab and move ruler interaction.

[zepumph]

@mbarlow12 this seems modular, and I may get to this before our meeting Tuesday unless there are concerns from you.

[terracoda]

@zepumph, no serious concerns if you get to it before implementing the grab button.

The grab button for the ruler might be straight forward now that you have created a common type for that. In the scheme of things, it's just another thing done, which seems good to me.

[zepumph]

Unassigning as GFLB is the priority.

[terracoda]

Adding onhold label for same reason as above. We will return to this when work on GFLB resumes.

[zepumph]

This work has been done. I ended up keeping everything in GFL rather than factoring it out to ISLC. I think it would be more trouble than its worth. Here are a few questions for review:

• Moving the "Change Mass" section to the left column did so in GFLB too. Is that aright?
• In the design doc it says "Adjust in . . ." but currently it says "Change mass in". Which one is preferred, keeping in mind that it is the same for BASICS.
• "Jump to minimum" and max has "mass" tacked on the end, for BASICS too.

@terracoda please review.

[terracoda]

@zepumph looking good!

• Tes, Bottom of left column is good for Change Mass section
• Yes, some iterations happened in BASICS, "Change mass" is correct. I had a note in the design doc, but not a visual :-)
• Yes, "Jump to" min/max "mass" is more clear, and it fits.

One thing that is different with Gravity Force Lab regular is the Mass Controls. In this sim they are visually and non-visually horizontal sliders (not vertical number spinners), would it be possible to either

1. Simplify the "Change mass" lines like they are for the "Move sphere" lines:

• Change mass [Left arrow][Right arrow]
• Change mass in smaller steps [Shift] + [Left arrow][Right Arrow]
  OR

2. Reverse the Arrows - horizontal pair first

• Increase mass [Right arrow] or [Up arrow]
• Decrease mass [Left arrow] or [Down arrow]

Personally, I prefer option 1, and I think it would give us a bit more visual blue space making the dialog less cluttered.

I cut and paste things together roughly ... is something like this possible?

[terracoda]

@zepumph, I added the above screen shot and updated the accessible content in the design doc, in case we can go with option 1.

Here's the link to the Keyboard Shortcuts Dialog section.

All other accessible content sounds great.

[zepumph]

Alright above I changed a few more things.

• I change the change mass rows as desired
• I refactored the way icons were being created
• I moved some a11y specific strings from the i18n json into the a11y strings file
• I factored out some hard coded strings

Note that changing the "change mass" row also effected GFLB. I updated that icon so that it was still up/down arrow keys though. @terracoda do things look good to you?

[terracoda]

@zepumph, Looking good, I like this visual simplification. I just need to double check the A11y Strings for GFL.
Gravity Force Lab

Gravity Force Lab:Basics

[terracoda]

@zepumph, for these 2 dialogs the Mass controls are different, one being a pure horizontal slider with small and large steps, and the other being a vertical number spinner slider with no smaller steps than the default step.
Are the follow changes possible? And if so can you adjust the A11y strings for both dialogs.

Gravity Force Lab regular:

Gravity Force Lab: Basics

[terracoda]

@zepumph, I added an issue to GFLB since that sim is almost in RC.
Ooops, I just noticed I made a mistake in my example. Will update the visual right now.

[terracoda]

@zepumph, and just as an alternative for GFL regular I can live without spelling out the Left/Right Arrows keys for smaller steps since all the keys work on a slider, regardless. I just feel including the Left/Right Arrow keys is more correct with the visual representation.

However, for GFL Basics, ideally we can adjust the string for regular steps to match the visual by referring to Up/Down Arrow keys.

That said, I don't think this request should block RC or publication because all the Arrow keys work in both cases.

[zepumph]

The two PDOM updates were completed above. They were simple enough that I thought it would be good to do before RC.