Add keyboard navigation

[jessegreenberg]

We are going to start adding keyboard navigation to this sim. It is a relatively simple sim, but the first to use sun/HSlider type. As we go through, we should see if the implementation for the sliders can be generalized somehow or possibly moved directly to HSlider.

[jessegreenberg]

@emily-phet here is an initial version with keyboard nav for the sliders:
http://www.colorado.edu/physics/phet/dev/html/ohms-law/1.3.8-dev.1/ohms-law_en.html?accessibility

A few questions:

• What should the focus highlight look like for these? Ok as is? Should it be around the thumb?
• For each slider, is the change in value per key press OK?

@mbarlow12 it doesn't work yet in IE11 and Firefox because of the issue with input/change events. Haven't tested Safari yet. Next step will be to include a workaround like https://github.com/phetsims/john-travoltage/blob/master/js/john-travoltage/view/AppendageNode.js#L256-L281.

[jessegreenberg]

I also just noticed in the google doc that the navigation order should be

voltage, resistance, sound on/off, reset

[jessegreenberg]

@mbarlow12 fixed the issues on IE11 and Firefox.

[emily-phet]

@jessegreenberg @mbarlow12 This looks great! Yes, the focus highlights need to go around the thumbs rather than around the full slider.

I was originally thinking a larger step size for the sliders, but the current 0.1 V increment doesn't feel too slow. And with the modifier key that increases stepsize, for me on my Mac it makes it 10 steps to jump the full slider range...which is great.

I'll talk with @zepumph about PhET-iO implementation for this sim when he returns, and then I can let you all know what will be in store for this sim. Can you comment on what next steps would be if we just wanted to publish this to the PhET site without any phet-io or screen reader accessibility work?

[jessegreenberg]

Sounds good, @mbarlow12 and I will work on changing the focus highlights in HSlider.

I was originally thinking a larger step size for the sliders

The step size is very easy to change, could make them bigger. We could sit down and do a real time tweaking session to get it just right. Or we can leave as is, up to you.

Can you comment on what next steps would be if we just wanted to publish this to the PhET site without any phet-io

This will require latest changes to sun, scenery-phet, joist, scenery, and probably others so we can't roll this out in a maintenance release. Once we are happy with keyboard nav, next steps will be preparing an RC test off of latest master and QA testing.

[jessegreenberg]

@emily-phet, @mbarlow12 and I worked on changing the focus highlight today. Here is the update:

http://www.colorado.edu/physics/phet/dev/html/ohms-law/1.3.8-dev.2/ohms-law_en.html?accessibility

Should the slider step sizes increase?

[emily-phet]

Looks great! I think the focus highlight and the step size is perfect. We'll just add to the list of basic keyboard shortcuts for this sim the modifier key that allows for a larger step size.

[zepumph]

Unassigning myself, I will continue with PhET-iO implementation in #50.

[jessegreenberg]

On 6/20/17, we also decided to add a custom modifier key that reduces the step size to the minimum resolution for a slider.

[jessegreenberg]

We added the shift key modifier to make the slider move at a different step.

@emily-phet @arouinfar @amanda-phet @amyh-phet in 6/27/17 meeting, we discussed that the keyboard steps could be larger for some sliders since the shift modifier will give user fine control. If they should change, what should they be?

@emily-phet what is the next step for the keyboard help dialog in this sim?

[emily-phet]

@jessegreenberg @mbarlow12 I've decided for keyboard nav that it is important to have a moderate step value by default, and friendly numerical values - even if this means the step isn't equal across the span of the slider.

Please have the voltage slider default to a 0.5V increment (from the bottom that would look like 0.1, 0.5, 1.0, 1.5,...9.0). Also add the ability for the shift modifier key to allow increments of 0.1V. Let me know if you need to investigate how to allow changes in incement across the range of a slider, or if you already have an idea of how to do this.
For Resistance, have the slider default to a 20 ohms. Also add the ability for the shift modifier key to allow increments of 1 ohm.

[jessegreenberg]

Sounds great @emily-phet. I wouldn't expect this to be too difficult to implement, but we should be sure to test with all of our supported screen reader platforms to make sure that the AT doesn't override our custom approach.

[jessegreenberg]

For a slider that goes from 10 - 1000 with a step size of 20, the browser is trying to place the value at (10, 30, 50 ... ) and so on, instead of ( 20, 40, 60, ... ).

If we try to correct by rounding to the nearest step value, that works for normal arrow presses, but we cannot detect when we are supposed to be off of normal step size increments when jumping with the function key pressed down. Say we are on value 40, and the browser wants us to be on value 70 due to our specified range and step size. It is difficult to determine whether to round to 60 or 80 because it is possible that we pressed page up (function + up arrow).

Screen readers tend to provide all keydown events on sliders. I am going to try bailing on observing the input event, and proceed with handling everything ourselves. Then we don't have to worry at all about how the browser is setting values.

[jessegreenberg]

In chrome, I can see the "key" and "code" for function key:

Not sure how widely supported this is beyond chrome. Otherwise, there is no keydown event for the function key.

[jessegreenberg]

It also looks like page up/down and home and end have their own keycodes. We should use those.

[jessegreenberg]

Implemented a custom strategy and it is working great in Mac OS Chrome. I am going to try it in a number of platforms with screen readers.

• VO + Safari
• JAWS + IE
• NVDA + Firefox
• Edge
• Chrome

[jessegreenberg]

All seems good with behavior, though the values weren't always read out correctly. When ready, we can likely fix this with aria-valuetext or by setting the step attribute again just for speech output.

[jessegreenberg]

@emily-phet here is a new version with this change, can you please review?

http://www.colorado.edu/physics/phet/dev/html/ohms-law/1.3.8-dev.4/ohms-law_en.html?accessibility

[jessegreenberg]

@mbarlow12, since we needed to support more dynamic steps, I changed the implementation in HSlider quite a bit. Using the input event resulted in a lot of fighting with the browser's default behavior, so now we are doing it all ourselves on the keydown event. Can you please review this commit?

phetsims/sun@483afe1

[emily-phet]

@jessegreenberg I took a look and played around with the sliders for a bit. Everything looks great! Very smooth behavior, I like that after using the fn key (and going to quirky values) using just the arrow keys snaps right to nice values.

[jessegreenberg]

Excellent, thanks @emily-phet!

[mbarlow12]

@jessegreenberg Looks solid to me as well.

[jessegreenberg]

Thanks @mbarlow12. I think that we can close this. Keyboard help dialog will be tracked in #61, and we are going to work on description work in a new issue the near future. Closing.