Update keyboard focus order - #64

phetsims · Jan 26, 2024 · d9c22c7 · d9c22c7
1 parent 6307cb3
commit d9c22c7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/js/common-vsm/view/VSMScreenView.ts b/js/common-vsm/view/VSMScreenView.ts
@@ -53,6 +53,7 @@ export default abstract class VSMScreenView<T extends VSMField> extends PDLScree
   protected readonly projectileSelectorNode: ProjectileSelectorNode;
   protected readonly topRightUIContainer: VBox;
   protected readonly eraserButton: EraserButton;
+  protected readonly measuringTapeNode: MeasuringTapeNode;
 
   protected constructor( model: VSMModel<T>,
                          public readonly launchPanel: VSMLaunchPanel,
@@ -160,7 +161,7 @@ export default abstract class VSMScreenView<T extends VSMField> extends PDLScree
 
     // tools
 
-    const measuringTapeNode = new MeasuringTapeNode( new Property( { name: 'm', multiplier: 1 } ), {
+    this.measuringTapeNode = new MeasuringTapeNode( new Property( { name: 'm', multiplier: 1 } ), {
       visibleProperty: model.isMeasuringTapeVisibleProperty,
       modelViewTransform: this.modelViewTransform,
       dragBounds: new Bounds2(
@@ -187,7 +188,7 @@ export default abstract class VSMScreenView<T extends VSMField> extends PDLScree
     // Allow the measuring tape to be dragged within the visible bounds of the screen, so that outliers can be measured.
     this.visibleBoundsProperty.link( visibleBounds => {
       const viewBounds = this.modelViewTransform.viewToModelBounds( visibleBounds.erodedXY( PDLConstants.SCREEN_VIEW_X_MARGIN, PDLConstants.SCREEN_VIEW_Y_MARGIN ) );
-      measuringTapeNode.setDragBounds( new Bounds2( 0, 0, viewBounds.maxX, viewBounds.maxY ) );
+      this.measuringTapeNode.setDragBounds( new Bounds2( 0, 0, viewBounds.maxX, viewBounds.maxY ) );
     } );
 
     const timeDisplayNode = new TimeDisplayNode( model.stopwatchElapsedTimeProperty, {
@@ -282,7 +283,7 @@ export default abstract class VSMScreenView<T extends VSMField> extends PDLScree
     this.toolsLayer.addChild( timeDisplayNode );
     this.toolsLayer.addChild( angleToolNode );
     this.toolsLayer.addChild( speedToolNode );
-    this.toolsLayer.addChild( measuringTapeNode );
+    this.toolsLayer.addChild( this.measuringTapeNode );
 
     this.addChild( this.projectileSelectorNode );
     this.addChild( this.fieldRadioButtonGroup );
@@ -359,19 +360,33 @@ export default abstract class VSMScreenView<T extends VSMField> extends PDLScree
     intervalToolNode?: Node ): void {
     this.pdomControlAreaNode.pdomOrder = [
 
+      // Launch controls
       this.launchButton,
       this.singleOrContinuousRadioButtonGroup,
 
+      // Experiment setup
       this.launchPanel,
 
+      // Field management
       this.fieldRadioButtonGroup,
+      this.eraserButton,
+
+      // Histogram
       this.accordionBox,
+
+      // Global tools
       staticToolPanel,
       interactiveToolPanel,
-      this.projectileSelectorNode,
       this.timeControlNode,
+
+      // Play area tools
+      this.measuringTapeNode,
       ...( intervalToolNode ? [ intervalToolNode ] : [] ),
-      this.eraserButton,
+
+      // Projectile selector
+      this.projectileSelectorNode,
+
+      // Reset all
       this.resetAllButton
     ];
   }

diff --git a/js/common/view/HistogramNode.ts b/js/common/view/HistogramNode.ts
@@ -333,6 +333,13 @@ export default class HistogramNode extends Node {
         rightTop: this.chartNode.rightBottom.plusXY( -8, 10 )
       } );
     this.addChild( barBlockSwitch );
+
+    this.pdomOrder = [
+      zoomButtonGroup,
+      binControlNode,
+      barBlockSwitch,
+      this.chartNode
+    ];
   }
 }
 

diff --git a/js/sampling/view/SamplingScreenView.ts b/js/sampling/view/SamplingScreenView.ts
@@ -228,13 +228,24 @@ export default class SamplingScreenView extends PDLScreenView<SamplingField> {
       } );
 
     this.pdomControlAreaNode.pdomOrder = [
+
+      // Launch controls
       this.launchButton,
       this.singleOrContinuousRadioButtonGroup,
 
+      // Experiment setup
       this.launchPanel,
 
+      // Histogram
       this.accordionBox,
+
+      // Global controls
+      this.timeControlNode,
+
+      // Sample selector
       sampleSelectorNode,
+
+      // Reset all
       this.resetAllButton
     ];
   }