add prototype of alt-input for stopwatch in toolbox, phetsims/a11y-re…

…search#166
phetsims · Nov 11, 2021 · 6781e2c · 6781e2c
1 parent 039a25d
commit 6781e2c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/js/common/view/ToolboxPanel.js b/js/common/view/ToolboxPanel.js
@@ -51,7 +51,10 @@ class ToolboxPanel extends WaveInterferencePanel {
 
     // Node used to create the icon
     isStopwatchVisibleProperty.value = true;
-    const stopwatchNodeIcon = stopwatchNode.rasterized().mutate( { scale: 0.45 } );
+    const stopwatchNodeIcon = stopwatchNode.rasterized().mutate( {
+      scale: 0.45,
+      tagName: 'button'
+    } );
     isStopwatchVisibleProperty.value = false;
 
     // The draggable icon, which has an overlay to make the buttons draggable instead of pressable
@@ -61,6 +64,12 @@ class ToolboxPanel extends WaveInterferencePanel {
       // stopwatchNode provided as targetNode in the DragListener constructor, so this press will target it
       stopwatchNode.dragListener.press( event );
       isStopwatchVisibleProperty.value = true;
+    }, () => {
+      stopwatchNode.stopwatch.positionProperty.value = this.localToParentPoint( stopwatchNodeIcon.leftTop );
+
+      // stopwatchNode provided as targetNode in the DragListener constructor, so this press will target it
+      isStopwatchVisibleProperty.value = true;
+      stopwatchNode.focus();
     } );
 
     // Make sure the probes have enough breathing room so they don't get shoved into the WaveMeterNode icon.  Anything
@@ -101,6 +110,9 @@ class ToolboxPanel extends WaveInterferencePanel {
         maxWidth: WaveInterferenceConstants.PANEL_MAX_WIDTH
       }
     );
+
+    // @public
+    this.stopwatchNodeIcon = stopwatchNodeIcon;
   }
 }
 
@@ -109,11 +121,13 @@ class ToolboxPanel extends WaveInterferencePanel {
  * @param {Node} node
  * @param {Property.<boolean>} inPlayAreaProperty
  * @param {function} down
+ * @param {function} [click]
  */
-const initializeIcon = ( node, inPlayAreaProperty, down ) => {
+const initializeIcon = ( node, inPlayAreaProperty, down, click ) => {
   node.cursor = 'pointer';
   inPlayAreaProperty.link( inPlayArea => { node.visible = !inPlayArea; } );
   node.addInputListener( DragListener.createForwardingListener( down ) );
+  click && node.addInputListener( { click: click } );
 };
 
 waveInterference.register( 'ToolboxPanel', ToolboxPanel );

diff --git a/js/common/view/WaveInterferenceStopwatchNode.js b/js/common/view/WaveInterferenceStopwatchNode.js
@@ -7,8 +7,8 @@
  */
 
 import StringProperty from '../../../../axon/js/StringProperty.js';
-import merge from '../../../../phet-core/js/merge.js';
 import Range from '../../../../dot/js/Range.js';
+import merge from '../../../../phet-core/js/merge.js';
 import StopwatchNode from '../../../../scenery-phet/js/StopwatchNode.js';
 import waveInterference from '../../waveInterference.js';
 import WaveInterferenceConstants from '../WaveInterferenceConstants.js';
@@ -44,6 +44,8 @@ class WaveInterferenceStopwatchNode extends StopwatchNode {
 
     super( model.stopwatch, config );
 
+    this.stopwatch = model.stopwatch;
+
     unitsProperty.link( units => this.setNumberFormatter( createNumberFormatter( units ) ) );
 
     // After the StopwatchNode is initialized with the maximal layout, use the correct initial value for the current

diff --git a/js/waves/view/WavesScreenView.js b/js/waves/view/WavesScreenView.js
@@ -339,6 +339,14 @@ class WavesScreenView extends ScreenView {
             model.stopwatch.reset();
           }
         }
+      },
+      keyboardDragListenerOptions: {
+        end: () => {
+          if ( toolboxIntersects( stopwatchNode.parentToGlobalBounds( stopwatchNode.bounds ) ) ) {
+            model.stopwatch.reset();
+            toolboxPanel.stopwatchNodeIcon.focus();
+          }
+        }
       }
     } );