initial commit for #180

js/moleculesandlight/view/MoleculesAndLightScreenView.js

@@ -12,6 +12,7 @@ define( function( require ) {
   'use strict';
 
   // modules
+  var AccessibleSectionNode = require( 'SCENERY_PHET/accessibility/AccessibleSectionNode' );
   var Bounds2 = require( 'DOT/Bounds2' );
   var Dimension2 = require( 'DOT/Dimension2' );
   var inherit = require( 'PHET_CORE/inherit' );
@@ -67,6 +68,17 @@ define( function( require ) {
       tandem: tandem
     } );
 
+    var summaryNode = new AccessibleSectionNode( 'Scene Summary', {
+      descriptionTagName: 'p',
+      accessibleDescription: 'This is where the description will go'
+    } );
+    var playAreaSectionNode = new AccessibleSectionNode( 'Play Area' );
+    var controlPanelSectionNode = new AccessibleSectionNode( 'Control Panel' );
+
+    this.addChild( summaryNode );
+    this.addChild( playAreaSectionNode );
+    this.addChild( controlPanelSectionNode );
+
     var modelViewTransform = ModelViewTransform2.createSinglePointScaleInvertedYMapping(
       Vector2.ZERO,
       new Vector2( Math.round( INTERMEDIATE_RENDERING_SIZE.width * 0.55 ),
@@ -76,7 +88,7 @@ define( function( require ) {
     // Create the observation window.  This will hold all photons, molecules, and photonEmitters for this photon
     // absorption model.
     var observationWindow = new ObservationWindow( photonAbsorptionModel, modelViewTransform, tandem.createTandem( 'observationWindow' ) );
-    this.addChild( observationWindow );
+    playAreaSectionNode.addChild( observationWindow );
 
     // This rectangle hides photons that are outside the observation window.
     // TODO: This rectangle is a temporary workaround that replaces the clipping area in ObservationWindow because of a
@@ -187,7 +199,7 @@ define( function( require ) {
     this.addChild( moleculeControlPanel );
 
     // a11y
-    this.accessibleOrder = [ observationWindow, moleculeControlPanel, photonEmissionControlPanel, playPauseButton, stepButton, showLightSpectrumButton, resetAllButton ];
+    // this.accessibleOrder = [ observationWindow, moleculeControlPanel, photonEmissionControlPanel, playPauseButton, stepButton, showLightSpectrumButton, resetAllButton ];
   }
 
   moleculesAndLight.register( 'MoleculesAndLightScreenView', MoleculesAndLightScreenView );

js/moleculesandlight/view/ObservationWindow.js

@@ -23,14 +23,37 @@ define( function( require ) {
   var PropertyIO = require( 'AXON/PropertyIO' );
   var Rectangle = require( 'SCENERY/nodes/Rectangle' );
   var RectangularPushButton = require( 'SUN/buttons/RectangularPushButton' );
+  var StringUtils = require( 'PHETCOMMON/util/StringUtils' );
   var Text = require( 'SCENERY/nodes/Text' );
+  var PhotonTarget = require( 'MOLECULES_AND_LIGHT/photon-absorption/model/PhotonTarget' );
+  var WavelengthConstants = require( 'MOLECULES_AND_LIGHT/photon-absorption/model/WavelengthConstants')
   var Vector2 = require( 'DOT/Vector2' );
 
   // phet-io modules
   var BooleanIO = require( 'ifphetio!PHET_IO/types/BooleanIO' );
 
   // strings
   var buttonNodeReturnMoleculeString = require( 'string!MOLECULES_AND_LIGHT/ButtonNode.ReturnMolecule' );
+  var controlPanelCarbonDioxideString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.CarbonDioxide' );
+  var controlPanelCarbonMonoxideString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.CarbonMonoxide' );
+  var controlPanelNitrogenDioxideString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.NitrogenDioxide' );
+  var controlPanelNitrogenString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.Nitrogen' );
+  var controlPanelOxygenString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.Oxygen' );
+  var controlPanelOzoneString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.Ozone' );
+  var controlPanelWaterString = require( 'string!MOLECULES_AND_LIGHT/ControlPanel.Water' );
+  var molecularNamePatternString = require( 'string!MOLECULES_AND_LIGHT/molecularNamePattern' );
+
+  // maps photon target to translatable string
+  var getMoleculeName = function( photonTarget ) {
+    return photonTarget === PhotonTarget.SINGLE_CO_MOLECULE ? controlPanelCarbonMonoxideString :
+           photonTarget === PhotonTarget.SINGLE_N2_MOLECULE ? controlPanelNitrogenString :
+           photonTarget === PhotonTarget.SINGLE_O2_MOLECULE ? controlPanelOxygenString :
+           photonTarget === PhotonTarget.SINGLE_CO2_MOLECULE ? controlPanelCarbonDioxideString :
+           photonTarget === PhotonTarget.SINGLE_NO2_MOLECULE ? controlPanelNitrogenDioxideString :
+           photonTarget === PhotonTarget.SINGLE_H2O_MOLECULE ? controlPanelWaterString :
+           photonTarget === PhotonTarget.SINGLE_O3_MOLECULE ? controlPanelOzoneString :
+           assert( false, 'unknown' );
+  }
 
   // constants
   var PHOTON_EMITTER_WIDTH = 125;
@@ -47,7 +70,14 @@ define( function( require ) {
   function ObservationWindow( photonAbsorptionModel, modelViewTransform, tandem ) {
 
     // Supertype constructor
-    Rectangle.call( this, 0, 0, 500, 300, CORNER_RADIUS, CORNER_RADIUS, { fill: 'black' } );
+    Rectangle.call( this, 0, 0, 500, 300, CORNER_RADIUS, CORNER_RADIUS, {
+      fill: 'black',
+
+      // a11y
+      tagName: 'div',
+      labelTagName: 'h3',
+      accessibleLabel: 'Observation Window'
+    } );
 
     var self = this;
     this.modelViewTransform = modelViewTransform; // @private
@@ -185,6 +215,11 @@ define( function( require ) {
       // hide the return molecule button
       self.returnMoleculeButtonNode.visible = self.returnMoleculeButtonVisibleProperty.get();
     } );
+
+    // a11y - when photon target, emission rate frequency, or photon type changes, update the accessible description
+    // of the observation window
+    Property.multilink( [ photonAbsorptionModel.photonTargetProperty, photonAbsorptionModel.emissionFrequencyProperty, photonAbsorptionModel.photonWavelengthProperty ], this.updateAccessibleDescription.bind( this ) );
+
   }
 
   moleculesAndLight.register( 'ObservationWindow', ObservationWindow );
@@ -228,6 +263,26 @@ define( function( require ) {
       for ( var i = 0; i < photonsToRemove.length; i++ ) {
         photonsToRemove[ i ].dispose();
       }
+    },
+
+//     "Case 1 (light source off):
+// In observation window, {{ultraviolet}} light source is off and points directly at {{an}} {{ozone}} molecule.
+
+// Case 2 (light source on):
+// In observation window, {{ultraviolet}} light source emits photons directly at {{an}} {{ozone}} molecule.
+// "
+
+    updateAccessibleDescription: function( photonTarget, emissionFrequency, wavelength ) {
+
+      var patternString = "In observation window, {{wavelengthName}} light source is off and points directly at {{molecule}}.";
+
+      var lightSourceString = WavelengthConstants.getLightSourceName( wavelength );
+      var moleculeString = getMoleculeName( photonTarget );
+
+      this.accessibleDescription = StringUtils.fillIn( patternString, {
+        wavelengthName: lightSourceString,
+        molecule: moleculeString
+      } );
     }
   } );
 } );