Add global hot key support to sun buttons and other UI components

[jessegreenberg]

It would be useful to add a way to support global hot keys with buttons. It seems that often global hotkeys will fire a button in some way. Relevant slack discussion, illustrating boilerplate that currently exists when adding hotkeys.

Chris Malley  3:00 PM
Sure would be nice to have an option to sun buttons like hotKey that adds a globalKeyStateTracker.keyupEmitter listener that automatically checks the button’s enabledProperty, fires the button’s listeners, etc.  I’m having to do all of that in client code, and its also duplicated in PlayControlButton. (edited) 





New
3:03
Here’s the boilerplate:
    // Hot-key support for 'Check Answer'
    globalKeyStateTracker.keyupEmitter.addListener( event => {
      if (
        KeyboardUtils.isKeyEvent( event, KeyboardUtils.KEY_C ) &&
        globalKeyStateTracker.altKeyDown &&
        checkAnswerButton.enabled &&
        checkAnswerButton.pdomDisplayed
      ) {
        // Do what the 'Check Answer' button does.
      }
    } );

Jesse Greenberg  3:03 PM
Yes, I could see that, that does seem nice!
3:06
Pondering about whether that could go all the way to PressListener...

Chris Malley  3:11 PM
I was going to say ButtonModel (or wherever listeners are notified), but you also need to inspect buttonNode.pdomDisplayed.   Looking at ButtonModel is confusing me.  this.listeners is private, and I don’t see where we iterate over that array to notify.

Jesse Greenberg  3:11 PM
I think it could, I can see how that would work in either PressListener or ButtonNode.

Chris Malley  3:11 PM
PressListener seems too general. And you may have multiple PressListeners on a Node.

Jesse Greenberg  3:12 PM
Was looking at that too. The various subtypes of ButtonModel control when the button listeners actually fire. this.listeners of ButtonModel is the array of PressListeners.
3:12
Yes, thats true

Currently, I am envisioning that an optional list of hotkeys could be added to ButtonNode. If supplied, a listener is added to the globalKeyStateTracker that calls ButtonNode.pdomClick to fire button listeners as if the button had been clicked once.

[pixelzoom]

I'm going to make the title of this issue more general, since I think it's potentially useful to have hot-key support for any UI component. It might be something that is handled with a mixin/trait, similar to have enabled is handled by EnabledComponent.

sun buttons would probably be a good "first UI component" in which to explore this.

[zepumph]

Subset of phetsims/scenery#1298