First pass at voicing for my challenge accordion box, #381

phetsims · Apr 26, 2021 · 25c797c · 25c797c
1 parent 6a83969
commit 25c797c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/js/common/view/describers/RatioDescriber.js b/js/common/view/describers/RatioDescriber.js
@@ -136,6 +136,19 @@ class RatioDescriber {
     } );
   }
 
+  /**
+   * @public
+   * @param {number} antecedent
+   * @param {number} consequent
+   * @returns {string}
+   */
+  getMyChallengeSentence( antecedent, consequent ) {
+    return StringUtils.fillIn( ratioAndProportionStrings.a11y.ratio.myChallenge, {
+      targetAntecedent: antecedent,
+      targetConsequent: consequent
+    } );
+  }
+
   /**
    * @public
    * @param {number} antecedent

diff --git a/js/create/view/MyChallengeAccordionBox.js b/js/create/view/MyChallengeAccordionBox.js
@@ -64,6 +64,20 @@ class MyChallengeAccordionBox extends AccordionBox {
         mouseAreaYDilation: 5
       },
 
+      // voicing
+      // TODO: this doesn't work because a sub component of the AccordionBox gets focus instead of the A-box itself. https://github.com/phetsims/ratio-and-proportion/issues/381
+      voicingCreateObjectResponse: event => {
+        if ( event.type === 'focus' ) {
+        return ratioAndProportionStrings.myChallenge;
+        }
+      },
+      voicingCreateHintResponse: event => {
+        if ( event.type === 'focus' ) {
+          return ratioAndProportionStrings.a11y.create.myChallengeHintText;
+        }
+      },
+
+
       // phet-io
       tandem: Tandem.REQUIRED
     }, options );
@@ -151,11 +165,20 @@ class MyChallengeAccordionBox extends AccordionBox {
     this.expandedProperty.value = DEFAULT_EXPANDED;
 
     const accordionBoxUtterance = new ActivationUtterance();
+    const accordionBoxVoicingUtterance = new ActivationUtterance();
     this.expandedProperty.lazyLink( expanded => {
-      accordionBoxUtterance.alert = expanded ?
-                                    ratioDescriber.getCurrentChallengeSentence( targetAntecedentProperty.value, targetConsequentProperty.value ) :
-                                    ratioAndProportionStrings.a11y.ratio.currentChallengeHidden;
+
+      if ( expanded ) {
+        accordionBoxUtterance.alert = ratioDescriber.getCurrentChallengeSentence( targetAntecedentProperty.value, targetConsequentProperty.value );
+        accordionBoxVoicingUtterance.alert = ratioDescriber.getMyChallengeSentence( targetAntecedentProperty.value, targetConsequentProperty.value );
+      }
+      else {
+        accordionBoxUtterance.alert = ratioAndProportionStrings.a11y.ratio.currentChallengeHidden;
+        accordionBoxVoicingUtterance.alert = ratioAndProportionStrings.a11y.ratio.myChallengeHidden;
+      }
+
       phet.joist.sim.utteranceQueue.addToBack( accordionBoxUtterance );
+      phet.joist.sim.voicingUtteranceQueue && phet.joist.sim.voicingUtteranceQueue.addToBack( accordionBoxVoicingUtterance );
     } );
 
     Property.multilink( [ targetAntecedentProperty, targetConsequentProperty ], ( targetAntecedent, targetConsequent ) => {

diff --git a/js/ratio-and-proportion-main.js b/js/ratio-and-proportion-main.js
@@ -6,7 +6,7 @@
  * @author Michael Kauzmann (PhET Interactive Simulations)
  */
 
-// import PreferencesConfiguration from '../../joist/js/preferences/PreferencesConfiguration.js';
+import PreferencesConfiguration from '../../joist/js/preferences/PreferencesConfiguration.js';
 import Sim from '../../joist/js/Sim.js';
 import simLauncher from '../../joist/js/simLauncher.js';
 import Tandem from '../../tandem/js/Tandem.js';
@@ -24,12 +24,15 @@ const simOptions = {
     qualityAssurance: 'Logan Bray, Steele Dalton, Megan Lai, Brooklyn Lash, Liam Mulhall, Devon Quispe, Kathryn Woessner',
     soundDesign: 'Ashton Morris'
   },
-  hasKeyboardHelpContent: true
-  // preferencesConfiguration: new PreferencesConfiguration( {
-  //   audioOptions: {
-  //     supportsVoicing: true
-  //   }
-  // } )
+  hasKeyboardHelpContent: true,
+  preferencesConfiguration: new PreferencesConfiguration( {
+    audioOptions: {
+      supportsVoicing: true
+    },
+    visualOptions: {
+      supportsInteractiveHighlights: true
+    }
+  } )
 };
 
 // launch the sim - beware that scenery Image nodes created outside of simLauncher.launch() will have zero bounds

diff --git a/ratio-and-proportion-strings_en.json b/ratio-and-proportion-strings_en.json
@@ -389,6 +389,9 @@
       "myChallengeHelpText": {
         "value": "Set left and right values to create your challenge, then move hands to explore it."
       },
+      "myChallengeHintText": {
+        "value": "Expand to set your challenge."
+      },
       "bothHandsGestureDescriptionHelpText": {
         "value": "Explore challenge ratio with individual Left and Right hands, or try with ratio locked. The custom Both Hands interaction is not yet possible with screen reader software on a mobile device."
       }
@@ -525,6 +528,12 @@
       "currentChallengeHidden": {
         "value": "Current challenge hidden."
       },
+      "myChallenge": {
+        "value": "My challenge {{targetAntecedent}} to {{targetConsequent}}."
+      },
+      "myChallengeHidden": {
+        "value": "My challenge hidden."
+      },
       "capitalized": {
         "at": {
           "value": "At"