diff --git a/js/AquaRadioButtonGroup.ts b/js/AquaRadioButtonGroup.ts index cf4415da..98df2d4c 100644 --- a/js/AquaRadioButtonGroup.ts +++ b/js/AquaRadioButtonGroup.ts @@ -9,7 +9,7 @@ import StrictOmit from '../../phet-core/js/types/StrictOmit.js'; import optionize, { combineOptions } from '../../phet-core/js/optionize.js'; -import { FlowBox, FlowBoxOptions, KeyboardListener, PDOMPeer, SceneryConstants } from '../../scenery/js/imports.js'; +import { FlowBox, FlowBoxOptions, KeyboardUtils, PDOMPeer, SceneryConstants, SceneryEvent } from '../../scenery/js/imports.js'; import multiSelectionSoundPlayerFactory from '../../tambo/js/multiSelectionSoundPlayerFactory.js'; import Tandem from '../../tandem/js/Tandem.js'; import AquaRadioButton, { AquaRadioButtonOptions } from './AquaRadioButton.js'; @@ -137,12 +137,13 @@ export default class AquaRadioButtonGroup extends FlowBox { // zoom - signify that key input is reserved and we should not pan when user presses arrow keys // See https://github.com/phetsims/scenery/issues/974 - const intentListener = new KeyboardListener( { - keys: [ 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown' ], - callback: event => { - event && event.pointer.reserveForKeyboardDrag(); + const intentListener = { + keydown: ( event: SceneryEvent ) => { + if ( KeyboardUtils.isArrowKey( event.domEvent ) ) { + event.pointer.reserveForKeyboardDrag(); + } } - } ); + }; this.addInputListener( intentListener ); const boundOnRadioButtonInput = this.onRadioButtonInput.bind( this ); @@ -158,7 +159,6 @@ export default class AquaRadioButtonGroup extends FlowBox { this.disposeAquaRadioButtonGroup = () => { this.removeInputListener( intentListener ); - intentListener.dispose(); radioButtons.forEach( radioButton => radioButton.dispose() ); this.onInputEmitter.dispose(); nodes.forEach( node => node.dispose() ); diff --git a/js/ComboBoxListBox.ts b/js/ComboBoxListBox.ts index f6e98605..1cfc94e2 100644 --- a/js/ComboBoxListBox.ts +++ b/js/ComboBoxListBox.ts @@ -264,7 +264,7 @@ export default class ComboBoxListBox extends Panel { // pdom - listener that navigates listbox items and closes the box from keyboard input const keyboardListener = new KeyboardListener( { keys: [ 'escape', 'tab', 'shift+tab', 'arrowUp', 'arrowDown', 'home', 'end' ], - callback: ( event, keysPressed ) => { + fire: ( event, keysPressed ) => { const sceneryEvent = event!; assert && assert( sceneryEvent, 'event is required for this listener' ); @@ -274,16 +274,12 @@ export default class ComboBoxListBox extends Panel { if ( keysPressed === 'escape' || keysPressed === 'tab' || keysPressed === 'shift+tab' ) { - // This keyboard event is captured so that escape doesn't forward to other popupable components. If - // ComboBox is ever implemented with generalized popupable/pane system this abort will not be necessary. - sceneryEvent.abort(); - // Escape and Tab hide the list box and return focus to the button hideListBoxCallback(); focusButtonCallback(); } else if ( keysPressed === 'arrowUp' || keysPressed === 'arrowDown' ) { - const domEvent = sceneryEvent.domEvent!; + const domEvent = event!; assert && assert( domEvent, 'domEvent is required for this listener' ); // prevent "native" behavior so that Safari doesn't make an error sound with arrow keys in @@ -297,9 +293,6 @@ export default class ComboBoxListBox extends Panel { const nextIndex = focusedItemIndex + direction; visibleItemNodes[ nextIndex ] && visibleItemNodes[ nextIndex ].focus(); - - // reserve for drag after focus has moved, as the change in focus will clear the intent on the pointer - sceneryEvent.pointer.reserveForKeyboardDrag(); } else if ( keysPressed === 'home' ) { visibleItemNodes[ 0 ].focus(); diff --git a/js/Dialog.ts b/js/Dialog.ts index e2cea023..4b87d8fd 100644 --- a/js/Dialog.ts +++ b/js/Dialog.ts @@ -396,9 +396,9 @@ export default class Dialog extends Popupable( Panel, 1 ) { // pdom - close the dialog when pressing "escape" const keyboardListener = new KeyboardListener( { keys: [ 'escape', 'tab', 'shift+tab' ], - callback: ( event, keysPressed ) => { - assert && assert( event && event.domEvent, 'event should be non-null and defined for this listener' ); - const domEvent = event!.domEvent!; + fire: ( event, keysPressed ) => { + assert && assert( event, 'event should be non-null and defined for this listener' ); + const domEvent = event!; if ( keysPressed === 'escape' ) { domEvent.preventDefault();