-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add keyboard navigation to NumberControl #341
Comments
It has been added now to master. |
Looks great to me! My one concern is if the thin outer box is slightly transparent that it won't work well on sims with a black background, or colored panel (which is often beige or gray in addition to white or black). So it would be good to see it on a few more sims. If it doesn't work well in Ruthorford Scattering, maybe we opt for a thinner but fully opaque stroke instead? |
Looks good @zepumph!
Great suggestion @amanda-phet. I'd also like to see how this look in other sims, and possibly use a fully opaque stroke if we notice any contrast issues. |
This reverts commit de8add7.
Our workaround to get this focusHighlight working yesterday isn't a good one. By making HSlider focusHighlightLayerable, we changed the bounds of all HSliders (thanks @phet-steele and @pixelzoom) for catching that). So @jessegreenberg and I will need to figure out another way to access the HSlider's "visibility" from the parent |
This was also a problem for that node added to NumberControl. I think we can fix that though by creating a shape that stays inside the bounds of the Component. |
Looks like you're doing something here related to highlighting the thumb. Keep in mind that HSlider supports a custom thumb via |
Slack discussion, since there is no record of design decisions in this issue.
|
@zepumph I think we are back on for this, refactoring is mostly completed in phetsims/sun#326, waiting for code review. If you want to discuss changes let me know, or if you would rather wait until code review is complete in that issue that is understandable too. Reassigning back to you. |
I got the depressed arrow look working, but I don't think it is good for master.
this.increasedEmitter.addListener( function() {
rightArrowButton.buttonModel.downProperty.value = true;
rightArrowButton.buttonModel.overProperty.value = true;
setTimeout( function() {
rightArrowButton.buttonModel.downProperty.value = false;
rightArrowButton.buttonModel.overProperty.value = false;
}, 100 );
} );
this.decreasedEmitter.addListener( function() {
leftArrowButton.buttonModel.downProperty.value = true;
leftArrowButton.buttonModel.overProperty.value = true;
setTimeout( function() {
leftArrowButton.buttonModel.downProperty.value = false;
leftArrowButton.buttonModel.overProperty.value = false;
}, 100 );
} ); This is a major hack to me, as buttonModel is read/listen only. Also |
This feels very related to phetsims/sun#323. I can't think of a great solution off the top of my head. For the a11y reasons listed in that issue, I have a feeling we may be stuck with something like Timer.setTimeout. One thing we could do is add something like togglePressedState() to RectangularButtonView, so the code in NumberControl would look like this.increasedEmitter.addListener( function() {
arrowButton.togglePressedState();
} ); and RectangularButtonView handles the timeout and the buttonModel. I believe that togglePressedState could be used for phetsims/sun#323. |
The above commit does something very similar to #341 (comment), but using phetsims/sun#323. @zepumph would you mind reviewing this commit when you return? |
Looks very nice! As with phetsims/sun#318 (comment) I wonder if we don't want to make |
There may be a new bug found in phetsims/plinko-probability#104 where mouse interaction with the thumb of the HSlider doesn't shift focus, and an extra tab is required to regain focus. As this doesn't happen in RIAW or Ohm's Law (but does for ISLC sims), I think it's related to the number control implementation. @jessegreenberg should I assign myself to investigate and update? |
There has been significant work done here, but no closure, and no progress for 31 months. So raising priority to high. Status of this issue: @zepumph had a question for @jessegreenberg in #341 (comment). @mbarlow12 identified a potential related bug manifesting in plinko-probability in phetsims/plinko-probability#104, and asked @jessegreenberg how to proceed. |
We have an accessible number control in Gravity Force Lab regular and accessible number spinners in Gravity Force Lab: Basics. I don't think the design patterns have been documented in "Binder", but the PhET objects are accessible with all inputs. |
@pixelzoom, I think this issue stale and phetsims/plinko-probability#104 is also likely stale since we didn't move forward with publishing that sim with Alternative Input. |
Thanks @terracoda - you're probably correct, it looks stale to me too. The subjects of @zepumph's question in #341 (comment), |
This is stale and can now be closed. The emitters referenced in #341 (comment) do not exist anymore, and the initial a11y code discussed in this issue has been removed or factored out in #452. |
In the keyboard navigation meeting today, we designed a prototype mockup for how the
NumberControl
component should look. We used Rutherford Scattering, Plinko Probability, and Pendulum Lab to think about what is best for the interaction. @amanda-phet could you please add the mockup to this issue so that @jessegreenberg or I can implement?The text was updated successfully, but these errors were encountered: