diff --git a/js/buoyancy/view/BuoyancyExploreScreenView.ts b/js/buoyancy/view/BuoyancyExploreScreenView.ts index 912f70eb..a89906ee 100644 --- 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 index 746d5d4d..ad23df1e 100644 --- a/js/buoyancy/view/BuoyancyIntroScreenView.ts +++ b/js/buoyancy/view/BuoyancyIntroScreenView.ts @@ -173,6 +173,7 @@ export default class BuoyancyIntroScreenView extends DensityBuoyancyScreenView 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 index 0e6683c8..b0b95876 100644 --- 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; } }