state descriptions for the InfraredPanel, see #374

greenhouse-effect-strings_en.json

@@ -671,6 +671,12 @@
         "controlAreaDescription": {
           "value": "The Control Area has options for changing the temperature units. You can control how fast the action happens in the observation window including buttons to pause and step forward."
         }
+      },
+      "sunlightControls": {
+        "value": "Sunlight Controls"
+      },
+      "solarIntensityHelpText": {
+        "value": "Set intensity of incoming sunlight."
       }
     },
     "sunlightAndReflectionPattern": {

js/GreenhouseEffectStrings.ts

@@ -286,14 +286,8 @@ type StringsType = {
         'playAreaDescriptionStringProperty': LocalizedStringProperty;
         'controlAreaDescriptionStringProperty': LocalizedStringProperty;
       };
-      'observationWindow': {
-        'sunlightPhotonsDescriptionStringProperty': LocalizedStringProperty;
-        'infraredEmissionIntensityPatternStringProperty': LocalizedStringProperty;
-        'infraredEmissionIntensityWithRedirectionPatternStringProperty': LocalizedStringProperty;
-        'noOutgoingInfraredStringProperty': LocalizedStringProperty;
-        'infraredDescriptionPatternStringProperty': LocalizedStringProperty;
-        'photonDensityDescriptionStringProperty': LocalizedStringProperty;
-      }
+      'sunlightControlsStringProperty': LocalizedStringProperty;
+      'solarIntensityHelpTextStringProperty': LocalizedStringProperty;
     };
     'sunlightAndReflectionPatternStringProperty': LocalizedStringProperty;
     'cloudRefectionStringProperty': LocalizedStringProperty;

js/layer-model/view/InfraredPanel.ts

@@ -35,7 +35,9 @@ export default class InfraredPanel extends LayerScreenControlPanel {
       width,
       layersModel,
       GreenhouseEffectStrings.infraredStringProperty,
-      tandem
+      {
+        tandem: tandem
+      }
     );
   }
 }

js/layer-model/view/LayerScreenControlPanel.ts

@@ -7,27 +7,35 @@
  */
 
 import { Node, Text, VBox } from '../../../../scenery/js/imports.js';
-import Panel from '../../../../sun/js/Panel.js';
-import Tandem from '../../../../tandem/js/Tandem.js';
+import Panel, { PanelOptions } from '../../../../sun/js/Panel.js';
 import GreenhouseEffectConstants from '../../common/GreenhouseEffectConstants.js';
 import greenhouseEffect from '../../greenhouseEffect.js';
 import LayerModelModel from '../model/LayerModelModel.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import GreenhouseEffectColors from '../../common/GreenhouseEffectColors.js';
+import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
+import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
+import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
 
 // constants
 const PANEL_MARGIN = 5;
 
+type LayerScreenControlPanelSelfOptions = EmptySelfOptions;
+
+// You must provide a tandem, but you can optionally provide a labelContent.
+type LayerScreenControlPanelOptions = LayerScreenControlPanelSelfOptions &
+  PickRequired<PanelOptions, 'tandem'> &
+  PickOptional<PanelOptions, 'labelContent'>;
+
 export default class LayerScreenControlPanel extends Panel {
 
   public constructor( controls: Node[],
                       width: number,
                       layersModel: LayerModelModel,
                       titleStringProperty: TReadOnlyProperty<string>,
-                      tandem: Tandem ) {
-
-    const options = {
+                      providedOptions: LayerScreenControlPanelOptions ) {
 
+    const options = optionize<LayerScreenControlPanelOptions, LayerScreenControlPanelSelfOptions, PanelOptions>()( {
       minWidth: width,
       maxWidth: width,
       xMargin: PANEL_MARGIN,
@@ -42,11 +50,10 @@ export default class LayerScreenControlPanel extends Panel {
       labelContent: titleStringProperty,
 
       // phet-io
-      tandem: tandem,
       visiblePropertyOptions: {
         phetioFeatured: true
       }
-    };
+    }, providedOptions );
 
     // Title text for the panel.
     const titleText = new Text( titleStringProperty, {

js/layer-model/view/SolarIntensityControl.ts

@@ -21,6 +21,7 @@ import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import GreenhouseEffectConstants from '../../common/GreenhouseEffectConstants.js';
 import Utils from '../../../../dot/js/Utils.js';
 import TRangedProperty from '../../../../axon/js/TRangedProperty.js';
+import SunlightIntensityDescriptionProperty from './describers/SunlightIntensityDescriptionProperty.js';
 
 const SOLAR_INTENSITY_SLIDER_STEP_SIZE = 0.25;
 
@@ -40,6 +41,10 @@ export default class SolarIntensityControl extends VBox {
       font: GreenhouseEffectConstants.LABEL_FONT
     } );
 
+    // A description of the sunlight intensity, for the aria-valuetext of the slider.
+    // TODO: Next add the context response for the value change, see https://github.com/phetsims/greenhouse-effect/issues/374
+    const sunlightIntensityDescriptionProperty = new SunlightIntensityDescriptionProperty( proportionateOutputRateProperty );
+
     // Slider
     const slider = new HSlider(
       proportionateOutputRateProperty,
@@ -50,6 +55,10 @@ export default class SolarIntensityControl extends VBox {
         keyboardStep: SOLAR_INTENSITY_SLIDER_STEP_SIZE,
         shiftKeyboardStep: SOLAR_INTENSITY_SLIDER_STEP_SIZE,
         pageKeyboardStep: SOLAR_INTENSITY_SLIDER_STEP_SIZE * 2,
+        labelContent: GreenhouseEffectStrings.solarIntensityStringProperty,
+        helpText: GreenhouseEffectStrings.a11y.layerModel.solarIntensityHelpTextStringProperty,
+        labelTagName: 'label',
+        a11yCreateAriaValueText: () => sunlightIntensityDescriptionProperty.value,
         valueChangeSoundGeneratorOptions: {
           middleMovingUpSoundPlayer: solarIntensitySoundPlayer,
           middleMovingDownSoundPlayer: solarIntensitySoundPlayer,

js/layer-model/view/SunlightPanel.ts

@@ -35,7 +35,10 @@ export default class SunlightPanel extends LayerScreenControlPanel {
       width,
       layersModel,
       GreenhouseEffectStrings.sunlightStringProperty,
-      tandem
+      {
+        tandem: tandem,
+        labelContent: GreenhouseEffectStrings.a11y.layerModel.sunlightControlsStringProperty
+      }
     );
   }
 }

js/layer-model/view/describers/SunlightIntensityDescriptionProperty.ts

@@ -0,0 +1,37 @@
+// Copyright 2021, University of Colorado Boulder
+
+/**
+ * An observable string that will describe the value of sunlight intensity. This description is relative to
+ * our sun, and will return something like
+ *
+ * "same as our sun" or
+ * "50% of our sun"
+ *
+ * @author Jesse Greenberg (PhET Interactive Simulations)
+ */
+import greenhouseEffect from '../../../greenhouseEffect.js';
+import StringProperty from '../../../../../axon/js/StringProperty.js';
+import Multilink from '../../../../../axon/js/Multilink.js';
+import Utils from '../../../../../dot/js/Utils.js';
+import TRangedProperty from '../../../../../axon/js/TRangedProperty.js';
+
+class SunlightIntensityDescriptionProperty extends StringProperty {
+  public constructor( intensityProperty: TRangedProperty ) {
+    super( '' );
+
+    // Monitor the intensity Property and update the value of the string.
+    Multilink.multilink( [ intensityProperty ], intensity => {
+      const describedIntensityPercentage = Utils.toFixedNumber( intensity, 2 ) * 100;
+
+      if ( describedIntensityPercentage === 100 ) {
+        this.value = 'same as our sun';
+      }
+      else {
+        this.value = `${describedIntensityPercentage}% of our sun`;
+      }
+    } );
+  }
+}
+
+greenhouseEffect.register( 'SunlightIntensityDescriptionProperty', SunlightIntensityDescriptionProperty );
+export default SunlightIntensityDescriptionProperty;