Accessible order for phetsims/area-model-introduction#2

phetsims · Feb 21, 2018 · 901e6ce · 901e6ce
1 parent 080835a
commit 901e6ce
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/js/common/view/AreaNode.js b/js/common/view/AreaNode.js
@@ -47,7 +47,7 @@ define( function( require ) {
     // @public {Area}
     this.area = area;
 
-    // @protected {Node} - Layers
+    // @public {Node} - Layers (public for a11y)
     this.areaLayer = new Node();
     this.labelLayer = new Node();
 
@@ -91,15 +91,16 @@ define( function( require ) {
     } );
     productLabelListener();
 
-    var eraseButton = new EraserButton( {
+    // @public {Node} - Exposed publicly for a11y
+    this.eraseButton = new EraserButton( {
       listener: function() {
         area.erase();
       },
       center: isProportional ? AreaModelConstants.PROPORTIONAL_RANGE_OFFSET : AreaModelConstants.GENERIC_RANGE_OFFSET,
       touchAreaXDilation: 8,
       touchAreaYDilation: 8
     } );
-    this.labelLayer.addChild( eraseButton );
+    this.labelLayer.addChild( this.eraseButton );
   }
 
   areaModelCommon.register( 'AreaNode', AreaNode );

diff --git a/js/common/view/AreaScreenView.js b/js/common/view/AreaScreenView.js
@@ -78,8 +78,9 @@ define( function( require ) {
 
     // Create all group-aligned content first (Panels are OK), since AccordionBoxes don't handle resizing
     //TODO: abstract method
-    var productNode = this.createProductNode( model, options.decimalPlaces );
-    var productBoxContent = new AlignBox( productNode, {
+    // @public {Node}
+    this.productNode = this.createProductNode( model, options.decimalPlaces );
+    var productBoxContent = new AlignBox( this.productNode, {
       group: panelAlignGroup,
       xAlign: 'center'
     } );
@@ -96,32 +97,34 @@ define( function( require ) {
     var selectionButtonAlignGroup = new AlignGroup();
 
     // TODO: don't require this ordering of creation just for sizing. creating the "bigger" one first
-    var productsSelectionPanel = this.createPanelContent( partialProductsString, panelAlignGroup,
-                                                   new PartialProductSelectionNode( model, selectionButtonAlignGroup ) );
-    var calculationSelectionPanel = this.createPanelContent( areaModelCalculationString, panelAlignGroup,
-                                                      new AreaCalculationSelectionNode( model.areaCalculationChoiceProperty, selectionButtonAlignGroup ) );
+    // @public {Node}
+    this.productsSelectionPanel = this.createPanelContent( partialProductsString, panelAlignGroup,
+                                                           new PartialProductSelectionNode( model, selectionButtonAlignGroup ) );
+    this.calculationSelectionPanel = this.createPanelContent( areaModelCalculationString, panelAlignGroup,
+                                                              new AreaCalculationSelectionNode( model.areaCalculationChoiceProperty, selectionButtonAlignGroup ) );
     // TODO: cleanup, let subtypes add bits
-    var partitionSelectionPanel = null;
+    // @public {Node|null}
+    this.partitionSelectionPanel = null;
     if ( model instanceof ProportionalAreaModel ) {
       var currentAreaOrientationProperty = new DynamicProperty( model.currentAreaProperty, {
         derive: 'visiblePartitionOrientationProperty',
         bidirectional: true
       } );
-      partitionSelectionPanel = this.createPanelContent( partitionString, panelAlignGroup, new PartitionSelectionNode( currentAreaOrientationProperty, selectionButtonAlignGroup ) );
+      this.partitionSelectionPanel = this.createPanelContent( partitionString, panelAlignGroup, new PartitionSelectionNode( currentAreaOrientationProperty, selectionButtonAlignGroup ) );
     }
     var selectionContent = new VBox( {
       spacing: 15
     } );
     var contentChildren = [];
     if ( options.showProductsSelection ) {
-      contentChildren.push( productsSelectionPanel );
+      contentChildren.push( this.productsSelectionPanel );
     }
     if ( options.showCalculationSelection ) {
-      contentChildren.push( calculationSelectionPanel );
+      contentChildren.push( this.calculationSelectionPanel );
     }
     // TODO: vary this based on the current area!
     if ( model.currentAreaProperty.value.partitionLineChoice === PartitionLineChoice.ONE ) {
-      contentChildren.push( partitionSelectionPanel );
+      contentChildren.push( this.partitionSelectionPanel );
     }
     selectionContent.children = contentChildren;
     // Add separators between items
@@ -142,17 +145,17 @@ define( function( require ) {
 
     // Create accordion boxes after all group-aligned content is created.
     // TODO: FML. product => factors, area => product.
-    var productBox = this.createAccordionBox( options.useSimplifiedNames ? factorsString : dimensionsString, model.productBoxExpanded, productBoxContent );
-    var areaBox = this.createAccordionBox( options.useSimplifiedNames ? productString : totalAreaOfModelString, model.totalModelBoxExpanded, areaBoxContent );
+    this.productBox = this.createAccordionBox( options.useSimplifiedNames ? factorsString : dimensionsString, model.productBoxExpanded, productBoxContent );
+    this.areaBox = this.createAccordionBox( options.useSimplifiedNames ? productString : totalAreaOfModelString, model.totalModelBoxExpanded, areaBoxContent );
 
     // TODO: sizing
-    var layoutNode = this.createLayoutNode && this.createLayoutNode( model, productBox.width ); // TODO: better way
+    var layoutNode = this.createLayoutNode && this.createLayoutNode( model, this.productBox.width ); // TODO: better way
 
     // @protected {VBox} - Available for suptype positioning relative to this.
     this.panelContainer = new VBox( {
       children: ( layoutNode ? [ layoutNode ] : [] ).concat( [
-        productBox,
-        areaBox,
+        this.productBox,
+        this.areaBox,
       ].concat( options.showCalculationSelection || options.showProductsSelection ? [ selectionPanel ] : [] ) ),
       spacing: AreaModelConstants.PANEL_SPACING
     } );
@@ -179,16 +182,16 @@ define( function( require ) {
     }
     this.addChild( this.calculationDisplayPanel );
 
-    // Reset All button
-    var resetAllButton = new ResetAllButton( {
+    // @public {Node}
+    this.resetAllButton = new ResetAllButton( {
       listener: function() {
         model.reset();
       },
       touchAreaDilation: 10,
       right: this.layoutBounds.right - AreaModelConstants.PANEL_MARGIN,
       bottom: this.layoutBounds.bottom - AreaModelConstants.PANEL_MARGIN
     } );
-    this.addChild( resetAllButton );
+    this.addChild( this.resetAllButton );
 
     // @protected {Array.<ProportionalAreaNode>}
     this.areaNodes = model.areas.map( this.createAreaNode.bind( this, model ) );

diff --git a/js/proportional/view/ProportionalAreaScreenView.js b/js/proportional/view/ProportionalAreaScreenView.js
@@ -47,15 +47,16 @@ define( function( require ) {
     AreaScreenView.call( this, model, options );
 
     // Scene selection
-    this.addChild( new SceneSelectionNode( model, {
+    var sceneSelectionNode = new SceneSelectionNode( model, {
       top: this.panelContainer.bottom + AreaModelConstants.PANEL_SPACING,
       centerX: this.panelContainer.centerX
-    } ) );
+    } );
+    this.addChild( sceneSelectionNode );
 
     // Checkboxes
     var gridCheckbox = new Checkbox( this.createGridIconNode(), model.gridLinesVisibleProperty );
-    var countingCheckbox = new Checkbox( this.createCountingIconNode(), model.countsVisibleProperty );
     var tileCheckbox = new Checkbox( this.createTileIconNode(), model.tilesVisibleProperty );
+    var countingCheckbox = new Checkbox( this.createCountingIconNode(), model.countsVisibleProperty );
 
     var checkboxContainer = new VBox( {
       children: [ gridCheckbox, countingCheckbox, tileCheckbox ],
@@ -84,6 +85,30 @@ define( function( require ) {
     } );
 
     this.addChild( checkboxContainer );
+
+    var accessibleOrder = [];
+    this.areaNodes.forEach( function( areaNode ) {
+      accessibleOrder.push( areaNode.areaLayer );
+    } );
+    if ( this.partitionSelectionPanel ) {
+      accessibleOrder.push( this.partitionSelectionPanel );
+    }
+    accessibleOrder.push( gridCheckbox );
+    accessibleOrder.push( tileCheckbox );
+    accessibleOrder.push( countingCheckbox );
+    accessibleOrder.push( this.productBox );
+    accessibleOrder.push( this.areaBox );
+    accessibleOrder.push( this.productNode );
+    accessibleOrder.push( this.productsSelectionPanel );
+    accessibleOrder.push( this.calculationSelectionPanel );
+    accessibleOrder.push( this.calculationDisplayPanel );
+    this.areaNodes.forEach( function( areaNode ) {
+      accessibleOrder.push( areaNode.eraseButton );
+    } );
+    accessibleOrder.push( sceneSelectionNode );
+    accessibleOrder.push( this.resetAllButton );
+    this.accessibleOrder = accessibleOrder;
+    console.log( accessibleOrder );
   }
 
   areaModelCommon.register( 'ProportionalAreaScreenView', ProportionalAreaScreenView );