Dynamically update focus order when masses are added, see #121

js/buoyancy/view/BuoyancyIntroScreenView.ts

@@ -34,6 +34,7 @@ import BlockSet from '../../common/model/BlockSet.js';
 import FluidSelectionPanel from './FluidSelectionPanel.js';
 import CuboidView from '../../common/view/CuboidView.js';
 import ScaleView from '../../common/view/ScaleView.js';
+import MassView from '../../common/view/MassView.js';
 
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
 
@@ -170,15 +171,17 @@ export default class BuoyancyIntroScreenView extends DensityBuoyancyScreenView<B
 
     this.addChild( this.popupLayer );
 
-    const cuboidViews = this.massViews.filter( massView => massView instanceof CuboidView );
     const scaleViews = this.massViews.filter( massView => massView instanceof ScaleView );
 
+    const cuboidPDOMLayer = new Node( { pdomOrder: [] } );
+
+    // Must be in the scene graph, so they can populate the pdom order
+    this.addChild( cuboidPDOMLayer );
+
     // The focus order is described in https://github.com/phetsims/density-buoyancy-common/issues/121
     this.pdomPlayAreaNode.pdomOrder = [
 
-      // TODO: When the cuboids change from the radio buttons, this needs to update. So consider a different parent for this part
-      // see https://github.com/phetsims/density-buoyancy-common/issues/121
-      ...cuboidViews.map( cuboidView => cuboidView.focusablePath ),
+      cuboidPDOMLayer,
 
       blocksRadioButtonGroup,
 
@@ -190,6 +193,15 @@ export default class BuoyancyIntroScreenView extends DensityBuoyancyScreenView<B
       displayOptionsPanel
     ];
 
+    const massAdded = ( massView: MassView ) => {
+      if ( massView instanceof CuboidView ) {
+        cuboidPDOMLayer.pdomOrder = [ ...cuboidPDOMLayer.pdomOrder!, massView.focusablePath ];
+        // nothing to do for removal since disposal of the node will remove it from the pdom order
+      }
+    };
+    this.massViews.addItemAddedListener( massAdded );
+    this.massViews.forEach( massAdded );
+
     this.pdomControlAreaNode.pdomOrder = [
       this.readoutPanelsVBox,
       this.resetAllButton

js/common/view/DensityBuoyancyScreenView.ts

@@ -64,6 +64,7 @@ import Duck from '../../buoyancy/model/Duck.js';
 import DuckView from '../../buoyancy/view/DuckView.js';
 import NumberIO from '../../../../tandem/js/types/NumberIO.js';
 import Utils from '../../../../dot/js/Utils.js';
+import createObservableArray, { ObservableArray } from '../../../../axon/js/createObservableArray.js';
 
 // constants
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
@@ -100,7 +101,7 @@ export default class DensityBuoyancyScreenView<Model extends DensityBuoyancyMode
 
   private readonly massDecorationLayer = new MassDecorationLayer();
 
-  public readonly massViews: MassView[];
+  public readonly massViews: ObservableArray<MassView>;
 
   private readonly debugView?: DebugView;
 
@@ -159,7 +160,7 @@ export default class DensityBuoyancyScreenView<Model extends DensityBuoyancyMode
 
     this.addChild( this.massDecorationLayer );
 
-    this.massViews = [];
+    this.massViews = createObservableArray<MassView>();
 
     this.sceneNode.stage.threeCamera.zoom = options.cameraZoom;
     this.sceneNode.stage.threeCamera.up = new THREE.Vector3( 0, 0, -1 );