Spinner keyboard shortcuts

[phet-steele]

@jessegreenberg @terracoda @emily-phet any reason that the pg up/pg down and home/end behaviour used for sliders could not also be used for spinners?

So:
pg up/pg down - increments/decrements by a case by case amount. Maybe more useful in sims with larger spinner ranges.
home/end - Goes to min/max value.

In Equality Explorer (still in development), there is a spinner with a range of [-40, 40]. It might be worth it to add these quality of life improvements for spinners with such a large range, but why not do it for all spinners?

Preemptively labelling for a11y meeting. @jessegreenberg told me to, it's his fault if it shouldn't be!

[jessegreenberg]

Thanks @phet-steele added to keyboard nav meeting agenda.

[emily-phet]

Just wanted to add a note here - pg up/pg down increments/decrements by 1/10th the span (@jessegreenberg correct me if I'm wrong). In cases where the slider span has been small, I think the pg up/pg down behavior just acts like home/end then.

In general, this idea sounds fine to me. Will just want to check with @terracoda to see if there is some convention this may be counter to. I doubt it, but we should check.

[terracoda]

For large ranges this is totally a good idea and is what is recommended in ARIA Best Practices for Spinbutton role (see Spinbutton section).

For small ranges bigger steps and jumping to min and max may be less important. Not sure if it is useful to have two examples available in common code, or to just go with one and let the user decide.

In Spinbutton widgets, the number box is usually editable, so the Left and Right Arrow keys are reserved to navigate content in the editable box.

In the case of PhET Sims the number box in a spinner is not editable (at least not at this point), so if we want to make the Left and Right Arrow keys work like the Up Down Arrow keys, I think we would have to do something custom.

Enabling the Left and Right Arrow keys would make spinners (spinbuttons) and sliders work identically (or almost identically) which could be beneficial to users in an educational context.

The functional role of the control is communicated to screen reader users via the HTML input and accompanying attributes such as type="range" and/or ARIA role="slider" or role="spinbutton".

I'm not sure what combination will work best for a PhET spinner. In earlier examples of sliders, we needed to add the ARIA role="slider" for the HTML input type="range" to make the control work consistently across browsers and AT. I don't think we have any experience yet with the "spinbutton" role. We can see what works best.

[jessegreenberg]

Discussed in 1/23/18 a11y meeting:
For all NumberPickers and NumberSpinners, we would like to add

• Page up/Page down, home and end functionality
• Up/down/left/right arrow keys will increment/decrement the value.

This issue will require changes in NumberPicker, so implementation will be tracked in a new issue in scenery-phet.

[jessegreenberg]

Done in the above commit. Changes were committed against phetsims/sun#318. Marking as 'pending-testing' so it is flagged in the next dev test. @mbarlow12 when you prepare the next test can you include this isssue?

[phet-steele]

Working well, thanks everyone!

[terracoda]

@emily-phet, @jessegreenberg, @mbarlow12, @phet-steele, sorry for my late reply. This issue was not assigned to me. I think we talked about some of this interaction in a meeting, though.

PhET's spinners are similar to the spinbutton widget role described in the WAI-ARIA with one key difference, the box that shows the current value is not text-editable. A further difference is that visually, in a PhET Sim sometimes the Arrows are pointing up and down and sometimes they are pointing left and right. Thus, implementing all 4 Arrows in PhET's case is perfect for us.

Also the specification states that increasing and decreasing in bigger steps with Pg Up and Pg Down shortcuts is optional. It is really only beneficial if the range of the spinner is a large enough number.

In my opinion, Pg Up and Pg Down should not work like Home and End. I would recommend that we provide an option to implement Pg Up and Pg Down, and when the spinner has fewer than a certain number of values (maybe it needs to be at least 20 or more) to not implement them.

Like the Shift key for making the smallest steps, making bigger steps is not always beneficial for users.

If it is difficult to make the optional shortcut keys optional, I would recommend that Pg Up and Pg Down just increase and decrease as per the Arrow keys.

[terracoda]

Ignore my last comment. Sorry, I didn't read the issue carefully enough. I already commented.