a11y string addition for observation window, slider, and return molec…

…ule button, see phetsims/molecules-and-light#180
phetsims · Apr 21, 2021 · a025b95 · a025b95
1 parent 11ba47f
commit a025b95
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/js/moleculesandlight/view/MoleculesAndLightScreenView.js b/js/moleculesandlight/view/MoleculesAndLightScreenView.js
@@ -20,6 +20,7 @@ define( function( require ) {
   var moleculesAndLight = require( 'MOLECULES_AND_LIGHT/moleculesAndLight' );
   var MoleculesAndLightA11yStrings = require( 'MOLECULES_AND_LIGHT/common/MoleculesAndLightA11yStrings' );
   var MoleculeSelectionPanel = require( 'MOLECULES_AND_LIGHT/moleculesandlight/view/MoleculeSelectionPanel' );
+	var Node = require( 'SCENERY/nodes/Node' );
   var ObservationWindow = require( 'MOLECULES_AND_LIGHT/moleculesandlight/view/ObservationWindow' );
   var PhetFont = require( 'SCENERY_PHET/PhetFont' );
   var PlayPauseButton = require( 'SCENERY_PHET/buttons/PlayPauseButton' );
@@ -40,6 +41,9 @@ define( function( require ) {
 
   // a11y strings
   var spectrumDiagramString = MoleculesAndLightA11yStrings.spectrumDiagramString.value;
+	var sceneSummaryString = MoleculesAndLightA11yStrings.sceneSummaryString.value;
+	var summaryInteractionHintString = MoleculesAndLightA11yStrings.summaryInteractionHintString.value;
+	var keyboardShortcutsHintString = MoleculesAndLightA11yStrings.keyboardShortcutsHintString.value;
 
   // constants
   // Model-view transform for intermediate coordinates.
@@ -70,9 +74,15 @@ define( function( require ) {
 
     var summaryNode = new AccessibleSectionNode( 'Scene Summary', {
       descriptionTagName: 'p',
-      accessibleDescription: 'This is where the description will go'
+      accessibleDescription: sceneSummaryString
     } );
+
+		// interaction hint and keyboard shortcuts
+		summaryNode.addChild( new Node( { tagName: 'p', accessibleLabel: summaryInteractionHintString } ) );
+		summaryNode.addChild( new Node( { tagName: 'p', accessibleLabel: keyboardShortcutsHintString } ) );
+
     var playAreaSectionNode = new AccessibleSectionNode( 'Play Area' );
+
     var controlPanelSectionNode = new AccessibleSectionNode( 'Control Panel' );
 
     this.addChild( summaryNode );
@@ -195,8 +205,8 @@ define( function( require ) {
     this.addChild( showLightSpectrumButton );
 
     // Add the nodes in the order necessary for correct layering.
-    this.addChild( photonEmissionControlPanel );
-    this.addChild( moleculeControlPanel );
+    playAreaSectionNode.addChild( photonEmissionControlPanel );
+    playAreaSectionNode.addChild( moleculeControlPanel );
 
     // a11y
     // this.accessibleOrder = [ observationWindow, moleculeControlPanel, photonEmissionControlPanel, playPauseButton, stepButton, showLightSpectrumButton, resetAllButton ];

diff --git a/js/moleculesandlight/view/ObservationWindow.js b/js/moleculesandlight/view/ObservationWindow.js
@@ -14,6 +14,7 @@ define( function( require ) {
   var inherit = require( 'PHET_CORE/inherit' );
   var MoleculeNode = require( 'MOLECULES_AND_LIGHT/photon-absorption/view/MoleculeNode' );
   var moleculesAndLight = require( 'MOLECULES_AND_LIGHT/moleculesAndLight' );
+  var MoleculesAndLightA11yStrings = require( 'MOLECULES_AND_LIGHT/common/MoleculesAndLightA11yStrings' );
   var Node = require( 'SCENERY/nodes/Node' );
   var platform = require( 'PHET_CORE/platform' );
   var PhetFont = require( 'SCENERY_PHET/PhetFont' );
@@ -26,7 +27,7 @@ define( function( require ) {
   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 WavelengthConstants = require( 'MOLECULES_AND_LIGHT/photon-absorption/model/WavelengthConstants');
   var Vector2 = require( 'DOT/Vector2' );
 
   // phet-io modules
@@ -41,7 +42,16 @@ define( function( require ) {
   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' );
+  // var molecularNamePatternString = require( 'string!MOLECULES_AND_LIGHT/molecularNamePattern' );
+
+  // a11y strings
+  var observationWindowDescriptionPatternString = MoleculesAndLightA11yStrings.observationWindowDescriptionPatternString.value;
+  var isOffAndPointsString = MoleculesAndLightA11yStrings.isOffAndPointsString.value;
+  var emitsPhotonsString = MoleculesAndLightA11yStrings.emitsPhotonsString.value;
+  var aString = MoleculesAndLightA11yStrings.aString.value;
+  var anString = MoleculesAndLightA11yStrings.anString.value;
+  var returnMoleculeString = MoleculesAndLightA11yStrings.returnMoleculeString.value;
+  var returnMoleculeHelpString = MoleculesAndLightA11yStrings.returnMoleculeHelpString.value;
 
   // maps photon target to translatable string
   var getMoleculeName = function( photonTarget ) {
@@ -53,7 +63,7 @@ define( function( require ) {
            photonTarget === PhotonTarget.SINGLE_H2O_MOLECULE ? controlPanelWaterString :
            photonTarget === PhotonTarget.SINGLE_O3_MOLECULE ? controlPanelOzoneString :
            assert( false, 'unknown' );
-  }
+  };
 
   // constants
   var PHOTON_EMITTER_WIDTH = 125;
@@ -76,7 +86,8 @@ define( function( require ) {
       // a11y
       tagName: 'div',
       labelTagName: 'h3',
-      accessibleLabel: 'Observation Window'
+      accessibleLabel: 'Observation Window',
+      prependLabels: true
     } );
 
     var self = this;
@@ -153,7 +164,14 @@ define( function( require ) {
         self.returnMoleculeButtonVisibleProperty.set( false );
         self.moleculeCheckBounds();
       },
-      tandem: tandem.createTandem( 'returnMoleculeButton' )
+      tandem: tandem.createTandem( 'returnMoleculeButton' ),
+
+      // a11y
+      tagName: 'input',
+      inputType: 'button',
+      accessibleLabel: returnMoleculeString,
+      accessibleDescription: returnMoleculeHelpString,
+      useAriaLabel: true
     } );
 
     this.returnMoleculeButtonNode.rightTop = ( new Vector2( this.width - 2 * this.frameLineWidth - 10, 10 ) );
@@ -274,14 +292,16 @@ define( function( require ) {
 
     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 );
+      var onOfString = emissionFrequency > 0 ? emitsPhotonsString : isOffAndPointsString;
+      var aOrAn = 'AEIOU'.search( moleculeString.charAt( 1 ) ) === -1 ? aString : anString;
 
-      this.accessibleDescription = StringUtils.fillIn( patternString, {
+      this.accessibleDescription = StringUtils.fillIn( observationWindowDescriptionPatternString, {
         wavelengthName: lightSourceString,
-        molecule: moleculeString
+        molecule: moleculeString,
+        lightOnOffLanguage: onOfString,
+        an: aOrAn
       } );
     }
   } );