pdom labels for the radio buttons, see #201

phetsims · Oct 30, 2019 · 3e044c6 · 3e044c6
1 parent ff5d259
commit 3e044c6
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/js/common/MoleculesAndLightA11yStrings.js b/js/common/MoleculesAndLightA11yStrings.js
@@ -122,21 +122,21 @@ define( require => {
     emissionSliderWavelengthRatePatterString: {
       value: '{{wavelength}} photon rate, {{frequency}}'
     },
-    lightSourceString: {
-      value: 'Light Source'
-    },
     lightSourceDescriptionString: {
       value: 'Change light source in observation window.'
     },
     moleculesString: {
       value: 'Molecules'
     },
-    moleculesPanelDescriptionString: {
-      value: 'Place molecule in front of light source.'
+    moleculesRadioButtonHelpTextString: {
+      value: 'Choose molecule and observe interactions with light source.'
     },
     pauseDescriptionString: {
       value: 'Pause what is happening in the observation window.'
     },
+    moleculeButtonLabelPatternString: {
+      value: '{{molecularName}}, {{molecularFormula}}, {{geometryTitle}}'
+    },
     playDescriptionString: {
       value: 'Resume what is happening in the observation window'
     },
@@ -203,6 +203,18 @@ define( require => {
     diatomicString: {
       value: 'diatomic'
     },
+    linearTitleString: {
+      value: 'Linear'
+    },
+    bentTitleString: {
+      value: 'Bent'
+    },
+    tetrahedralTitleString: {
+      value: 'Tetrahderal'
+    },
+    diatomicTitleString: {
+      value: 'Diatomic'
+    },
     geometryLabelPatternString: {
       value: 'This molecule has {{geometry}} geometry.'
     },

diff --git a/js/moleculesandlight/view/MoleculeSelectionPanel.js b/js/moleculesandlight/view/MoleculeSelectionPanel.js
@@ -20,6 +20,7 @@ define( require => {
   const MolecularFormulaStrings = require( 'MOLECULES_AND_LIGHT/photon-absorption/view/MolecularFormulaStrings' );
   const ModelViewTransform2 = require( 'PHETCOMMON/view/ModelViewTransform2' );
   const MoleculeNode = require( 'MOLECULES_AND_LIGHT/photon-absorption/view/MoleculeNode' );
+  const MoleculeUtils = require( 'MOLECULES_AND_LIGHT/photon-absorption/view/MoleculeUtils' );
   const moleculesAndLight = require( 'MOLECULES_AND_LIGHT/moleculesAndLight' );
   const MoleculesAndLightA11yStrings = require( 'MOLECULES_AND_LIGHT/common/MoleculesAndLightA11yStrings' );
   const N2 = require( 'MOLECULES_AND_LIGHT/photon-absorption/model/molecules/N2' );
@@ -42,8 +43,9 @@ define( require => {
 
   // a11y strings
   const moleculesString = MoleculesAndLightA11yStrings.moleculesString.value;
-  const moleculesPanelDescriptionString = MoleculesAndLightA11yStrings.moleculesPanelDescriptionString.value;
+  const moleculesRadioButtonHelpTextString = MoleculesAndLightA11yStrings.moleculesRadioButtonHelpTextString.value;
   const moleculeSelectionAlertPatternString = MoleculesAndLightA11yStrings.moleculeSelectionAlertPatternString.value;
+  const moleculeButtonLabelPatternString = MoleculesAndLightA11yStrings.moleculeButtonLabelPatternString.value;
 
   // constants
   // Model view transform used for creating images of the various molecules. This is basically a null transform except
@@ -107,13 +109,13 @@ define( require => {
     }
 
 
-    const createElement = function( photonTarget, formulaString, molecule, tandemName, descriptionContent ) {
+    const createElement = ( photonTarget, formulaString, molecule, tandemName, descriptionContent ) => {
       return {
         node: createRadioButtonContent( PhotonTarget.getMoleculeName( photonTarget ),
-          formulaString, new MoleculeNode( molecule, MODEL_VIEW_TRANSFORM ) ),
+        formulaString, new MoleculeNode( molecule, MODEL_VIEW_TRANSFORM ) ),
         value: photonTarget,
         tandemName: tandemName,
-        labelContent: PhotonTarget.getMoleculeName( photonTarget )
+        labelContent: this.getPDOMLabel( molecule )
       };
     };
     const moleculeOptions = { isForIcon: true };
@@ -175,7 +177,7 @@ define( require => {
       tagName: 'div',
       labelTagName: 'h3',
       labelContent: moleculesString,
-      descriptionContent: moleculesPanelDescriptionString
+      descriptionContent: moleculesRadioButtonHelpTextString
     } );
 
     // var handleMoleculeChange = function( event ) {
@@ -201,6 +203,26 @@ define( require => {
 
   moleculesAndLight.register( 'MoleculeSelectionPanel', MoleculeSelectionPanel );
 
-  return inherit( Panel, MoleculeSelectionPanel );
+  return inherit( Panel, MoleculeSelectionPanel, {
 
+    /**
+     * Get the PDOM label for one of the buttons. Contains the molecular name, molecular formula, and
+     * molecular geometry. Will return something like "Carbon Monoxide, CO, Linear"
+     * @private
+     *
+     * @param {Molecule} molecule
+     * @returns {string}
+     */
+    getPDOMLabel: function( molecule ) {
+      const molecularNameString = MoleculeUtils.getMolecularName( molecule );
+      const geometryTitleString = MoleculeUtils.getGeometryTitleString( molecule );
+      const molecularFormulaString = MoleculeUtils.getMolecularFormula( molecule );
+
+      return StringUtils.fillIn( moleculeButtonLabelPatternString, {
+        molecularName: molecularNameString,
+        molecularFormula: molecularFormulaString,
+        geometryTitle: geometryTitleString
+      } );
+    }
+  } );
 } );
diff --git a/js/photon-absorption/view/MoleculeUtils.js b/js/photon-absorption/view/MoleculeUtils.js
@@ -130,6 +130,36 @@ define( require => {
      return labelString;
     },
 
+    /**
+     * Returns a title of the molecular geometry, meant to describe geometry on its own. Will return
+     * something like "Linear" or "Bent".
+     *
+     * @param {Molecule} molecule
+     * @returns {string}
+     */
+    getGeometryTitleString( molecule ) {
+      let titleString = '';
+
+      const geometry = MolecularGeometryMap.get( molecule.constructor );
+      if ( geometry === Geometry.LINEAR ) {
+        titleString = linearString;
+      }
+      else if ( geometry === Geometry.BENT ) {
+        titleString = bentString;
+      }
+      else if ( geometry === Geometry.TETRAHEDRAL ) {
+        titleString = tetrahedralString;
+      }
+      else if ( geometry === Geometry.DIATOMIC ) {
+        titleString = diatomicString;
+      }
+      else {
+        throw new Error( 'requesting geometry label for a geometry that is not registered' );
+     }
+
+     return titleString;
+    },
+
     /**
      * Get a description of the molecular geometry. This will be read by the user. Will return a full
      * description like