From 1570dd0fd97a40d45bb98b636d1ced25badc065c Mon Sep 17 00:00:00 2001
From: Sam Reid <reids@colorado.edu>
Date: Wed, 8 May 2024 16:02:51 -0600
Subject: [PATCH] Dynamically update focus order when masses are added, see
 https://github.com/phetsims/density-buoyancy-common/issues/121

---
 js/buoyancy/view/BuoyancyIntroScreenView.ts | 20 ++++++++++++++++----
 js/common/view/DensityBuoyancyScreenView.ts |  5 +++--
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/js/buoyancy/view/BuoyancyIntroScreenView.ts b/js/buoyancy/view/BuoyancyIntroScreenView.ts
index ad23df1e..d27219df 100644
--- a/js/buoyancy/view/BuoyancyIntroScreenView.ts
+++ b/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
diff --git a/js/common/view/DensityBuoyancyScreenView.ts b/js/common/view/DensityBuoyancyScreenView.ts
index 8c0f1467..90ff09fe 100644
--- a/js/common/view/DensityBuoyancyScreenView.ts
+++ b/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 );