Update focus order for the explore screen, see #121

phetsims · May 8, 2024 · d4aa9af · d4aa9af
1 parent 6d8b988
commit d4aa9af
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/js/buoyancy/view/BuoyancyExploreScreenView.ts b/js/buoyancy/view/BuoyancyExploreScreenView.ts
@@ -31,6 +31,8 @@ import ThreeUtils from '../../../../mobius/js/ThreeUtils.js';
 import DensityBuoyancyCommonColors from '../../common/view/DensityBuoyancyCommonColors.js';
 import ForceDiagramNode from '../../common/view/ForceDiagramNode.js';
 import buoyancy_explore_screen_block_png from '../../../images/buoyancy_explore_screen_block_png.js';
+import CuboidView from '../../common/view/CuboidView.js';
+import ScaleView from '../../common/view/ScaleView.js';
 
 // constants
 const MARGIN = DensityBuoyancyCommonConstants.MARGIN;
@@ -181,6 +183,33 @@ export default class BuoyancyExploreScreenView extends DensityBuoyancyScreenView
     } );
 
     this.addChild( this.popupLayer );
+
+    const cuboidViews = this.massViews.filter( massView => massView instanceof CuboidView );
+    const scaleViews = this.massViews.filter( massView => massView instanceof ScaleView );
+
+    // The focus order is described in https://github.com/phetsims/density-buoyancy-common/issues/121
+    this.pdomPlayAreaNode.pdomOrder = [
+
+      cuboidViews[ 0 ].focusablePath,
+      this.rightBox.primaryControlNode,
+
+      // TODO: Add cuboidViews[1] which is created lazily when the radio button is pressed, see https://github.com/phetsims/density-buoyancy-common/issues/121
+      // cuboidViews[ 1 ].focusablePath,
+      this.rightBox.secondaryControlNode,
+
+      fluidDensityControlPanel,
+
+      // The blocks are added (a) pool then (b) outside, but the focus order is (a) outside then (b) pool
+      ..._.reverse( scaleViews.map( scaleView => scaleView.focusablePath ) )
+    ];
+
+    this.pdomControlAreaNode.pdomOrder = [
+      blocksRadioButtonGroup,
+      buoyancyDisplayOptionsNode,
+      densityAccordionBox,
+      submergedAccordionBox,
+      this.resetAllButton
+    ];
   }
 
   public static getBuoyancyExploreIcon(): Node {

diff --git a/js/buoyancy/view/BuoyancyIntroScreenView.ts b/js/buoyancy/view/BuoyancyIntroScreenView.ts
@@ -173,6 +173,7 @@ export default class BuoyancyIntroScreenView extends DensityBuoyancyScreenView<B
     const cuboidViews = this.massViews.filter( massView => massView instanceof CuboidView );
     const scaleViews = this.massViews.filter( massView => massView instanceof ScaleView );
 
+    // 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

diff --git a/js/common/view/PrimarySecondaryControlsNode.ts b/js/common/view/PrimarySecondaryControlsNode.ts
@@ -25,6 +25,11 @@ export type PrimarySecondaryControlsNodeOptions = SelfOptions & BlockControlNode
 
 export default class PrimarySecondaryControlsNode extends PrimarySecondaryPanelsNode {
 
+  // Controls for the primary and secondary masses. Public so they can be split up in the focus order,
+  // see https://github.com/phetsims/density-buoyancy-common/issues/121
+  public readonly primaryControlNode: BlockControlNode;
+  public readonly secondaryControlNode: BlockControlNode;
+
   /**
    * @param primaryMass
    * @param secondaryMass
@@ -58,6 +63,9 @@ export default class PrimarySecondaryControlsNode extends PrimarySecondaryPanels
         visibleProperty: DerivedProperty.and( [ secondaryMass.visibleProperty, secondaryControlNode.visibleProperty ] )
       } )
     );
+
+    this.primaryControlNode = primaryControlNode;
+    this.secondaryControlNode = secondaryControlNode;
   }
 }