Set pdom order for the applications screen, see #121

phetsims · May 9, 2024 · a98740d · a98740d
1 parent b08a201
commit a98740d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 6 deletions.
diff --git a/js/buoyancy/view/BuoyancyApplicationsScreenView.ts b/js/buoyancy/view/BuoyancyApplicationsScreenView.ts
@@ -42,6 +42,7 @@ import Multilink from '../../../../axon/js/Multilink.js';
 import PrecisionSliderThumb from '../../common/view/PrecisionSliderThumb.js';
 import ThreeUtils from '../../../../mobius/js/ThreeUtils.js';
 import Bottle from '../model/Bottle.js';
+import MassView from '../../common/view/MassView.js';
 
 // constants
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
@@ -389,6 +390,47 @@ export default class BuoyancyApplicationsScreenView extends DensityBuoyancyScree
     this.addChild( bottleBoatRadioButtonGroup );
 
     this.addChild( this.popupLayer );
+
+    // Layer for the focusable masses. Must be in the scene graph, so they can populate the pdom order
+    const blockLayer = new Node( { pdomOrder: [] } );
+    this.addChild( blockLayer );
+    const bottleBoatLayer = new Node( { pdomOrder: [] } );
+    this.addChild( bottleBoatLayer );
+
+    // The focus order is described in https://github.com/phetsims/density-buoyancy-common/issues/121
+    this.pdomPlayAreaNode.pdomOrder = [
+
+      blockLayer,
+      rightBoatContent,
+      rightBottleContent,
+      bottleBoatLayer,
+
+      resetSceneButton,
+      fluidDensityControlPanel
+    ];
+
+    const massViewAdded = ( massView: MassView ) => {
+      if ( massView.mass === model.bottle || massView.mass === model.boat ) {
+        bottleBoatLayer.pdomOrder = [ ...bottleBoatLayer.pdomOrder!, massView.focusablePath ];
+
+        // nothing to do for removal since disposal of the node will remove it from the pdom order
+      }
+      else if ( massView.mass === model.block ) {
+        blockLayer.pdomOrder = [ ...blockLayer.pdomOrder!, massView.focusablePath ];
+
+        // nothing to do for removal since disposal of the node will remove it from the pdom order
+      }
+    };
+    this.massViews.addItemAddedListener( massViewAdded );
+    this.massViews.forEach( massViewAdded );
+
+    this.pdomControlAreaNode.pdomOrder = [
+      displayOptionsNode,
+      densityAccordionBox,
+      submergedAccordionBox,
+      bottleBoatRadioButtonGroup,
+      this.resetAllButton
+    ];
   }
 
   public override step( dt: number ): void {

diff --git a/js/buoyancy/view/BuoyancyShapesScreenView.ts b/js/buoyancy/view/BuoyancyShapesScreenView.ts
@@ -41,7 +41,6 @@ import ThreeUtils from '../../../../mobius/js/ThreeUtils.js';
 import DensityBuoyancyCommonColors from '../../common/view/DensityBuoyancyCommonColors.js';
 import Cone from '../../common/model/Cone.js';
 import ConeView from '../../common/view/ConeView.js';
-import CuboidView from '../../common/view/CuboidView.js';
 import ScaleView from '../../common/view/ScaleView.js';
 import MassView from '../../common/view/MassView.js';
 
@@ -117,7 +116,7 @@ export default class BuoyancyShapesScreenView extends DensityBuoyancyScreenView<
       infoButton.left = bottomLeftPoolPoint.x;
     };
 
-    const materialControlNode = new MaterialControlNode( this.model.materialProperty, new Property( 1 ),
+    const materialComboBox = new MaterialControlNode( this.model.materialProperty, new Property( 1 ),
       DensityBuoyancyCommonConstants.SIMPLE_MASS_MATERIALS, this.popupLayer, {
         supportCustomMaterial: false,
         tandem: options.tandem.createTandem( 'materialComboBox' )
@@ -148,7 +147,7 @@ export default class BuoyancyShapesScreenView extends DensityBuoyancyScreenView<
       }
     );
     this.rightBox = new MultiSectionPanelsNode(
-      [ materialControlNode,
+      [ materialComboBox,
         primaryShapeSizeControlNode,
         secondaryShapeSizeControlNode ]
     );
@@ -219,8 +218,6 @@ export default class BuoyancyShapesScreenView extends DensityBuoyancyScreenView<
 
     this.addChild( this.popupLayer );
 
-
-    const cuboidViews = this.massViews.filter( massView => massView instanceof CuboidView );
     const scaleViews = this.massViews.filter( massView => massView instanceof ScaleView );
 
     // Layer for the focusable masses. Must be in the scene graph, so they can populate the pdom order
@@ -233,7 +230,7 @@ export default class BuoyancyShapesScreenView extends DensityBuoyancyScreenView<
     this.pdomPlayAreaNode.pdomOrder = [
 
       primaryMassLayer,
-      materialControlNode,
+      materialComboBox,
       primaryShapeSizeControlNode,
 
       secondaryMassLayer,