Updates to RAP AccordionBox voicing design, #441 #381 #440

phetsims · Mar 18, 2022 · f740c69 · f740c69
1 parent 6101275
commit f740c69
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/js/common/view/describers/RatioDescriber.ts b/js/common/view/describers/RatioDescriber.ts
@@ -112,8 +112,10 @@ class RatioDescriber {
 
   getCurrentChallengeSentence( antecedent: number, consequent: number ): string {
     return StringUtils.fillIn( ratioAndProportionStrings.a11y.ratio.currentChallenge, {
-      targetAntecedent: antecedent,
-      targetConsequent: consequent
+
+      // for consistency with all values, see https://github.com/phetsims/ratio-and-proportion/issues/283
+      targetAntecedent: this.getWordFromNumber( antecedent ),
+      targetConsequent: this.getWordFromNumber( consequent )
     } );
   }
 

diff --git a/js/create/view/MyChallengeAccordionBox.ts b/js/create/view/MyChallengeAccordionBox.ts
@@ -26,7 +26,6 @@ import EnumerationProperty from '../../../../axon/js/EnumerationProperty.js';
 import AccordionBox, { AccordionBoxOptions } from '../../../../sun/js/AccordionBox.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 
 const PICKER_SCALE = 1.5;
@@ -65,11 +64,10 @@ class MyChallengeAccordionBox extends AccordionBox {
 
     const expandedProperty = new BooleanProperty( DEFAULT_EXPANDED );
 
-    const voicingObjectResponse = () => {
-      return expandedProperty.value ? StringUtils.fillIn( ratioAndProportionStrings.a11y.create.antecedentToConsequentPattern, {
-        targetAntecedent: targetAntecedentProperty.value,
-        targetConsequent: targetConsequentProperty.value
-      } ) : ratioAndProportionStrings.a11y.create.hidden;
+    const createAccordionBoxContextResponse = () => {
+      return expandedProperty.value ?
+             ratioDescriber.getCurrentChallengeSentence( targetAntecedentProperty.value, targetConsequentProperty.value ) :
+             ratioAndProportionStrings.a11y.ratio.currentChallengeHidden;
     };
 
     const options = optionize<MyChallengeAccordionBoxOptions, {}, AccordionBoxOptions, 'tandem'>( {
@@ -97,10 +95,10 @@ class MyChallengeAccordionBox extends AccordionBox {
 
       // voicing
       voicingNameResponse: ratioAndProportionStrings.myChallenge,
-      voicingObjectResponse: voicingObjectResponse,
-      voicingHintResponse: () => expandedProperty.value ?
-                                 ratioAndProportionStrings.a11y.create.myChallengeVoicingExpandedHelpText :
-                                 ratioAndProportionStrings.a11y.create.myChallengeVoicingCollapsedHelpText,
+      voicingContextResponse: createAccordionBoxContextResponse,
+
+      // Only deliver the hint if not expanded
+      voicingHintResponse: () => expandedProperty.value ? null : ratioAndProportionStrings.a11y.create.myChallengeHintText,
 
       // phet-io
       tandem: Tandem.REQUIRED
@@ -122,7 +120,7 @@ class MyChallengeAccordionBox extends AccordionBox {
       ratioLockedProperty.value && this.alertDescriptionUtterance( ratioUnlockedFromMyChallenge );
     } );
 
-    const createContextResponse = () => ratioDescriber.getTargetRatioChangeAlert( targetAntecedentProperty.value, targetConsequentProperty.value );
+    const createNumberPickerContextResponse = () => ratioDescriber.getTargetRatioChangeAlert( targetAntecedentProperty.value, targetConsequentProperty.value );
 
     const antecedentNumberPicker = new NumberPicker( targetAntecedentProperty, rangeProperty, {
       scale: PICKER_SCALE,
@@ -131,11 +129,12 @@ class MyChallengeAccordionBox extends AccordionBox {
       accessibleName: ratioAndProportionStrings.a11y.leftValue,
       a11yDependencies: [ targetConsequentProperty ],
       a11yCreateAriaValueText: ratioDescriber.getWordFromNumber,
-      a11yCreateContextResponseAlert: createContextResponse,
+      a11yCreateContextResponseAlert: createNumberPickerContextResponse,
 
       // voicing
       voicingNameResponse: ratioAndProportionStrings.a11y.leftValue,
-      voicingContextResponse: createContextResponse,
+      voicingObjectResponse: () => ratioDescriber.getWordFromNumber( targetAntecedentProperty.value ),
+      voicingContextResponse: createNumberPickerContextResponse,
 
       // phet-io
       tandem: options.tandem.createTandem( 'antecedentNumberPicker' )
@@ -157,11 +156,12 @@ class MyChallengeAccordionBox extends AccordionBox {
       accessibleName: ratioAndProportionStrings.a11y.rightValue,
       a11yDependencies: [ targetAntecedentProperty ],
       a11yCreateAriaValueText: ratioDescriber.getWordFromNumber,
-      a11yCreateContextResponseAlert: createContextResponse,
+      a11yCreateContextResponseAlert: createNumberPickerContextResponse,
 
       // voicing
       voicingNameResponse: ratioAndProportionStrings.a11y.rightValue,
-      voicingContextResponse: createContextResponse,
+      voicingObjectResponse: () => ratioDescriber.getWordFromNumber( targetConsequentProperty.value ),
+      voicingContextResponse: createNumberPickerContextResponse,
 
       // phet-io
       tandem: options.tandem.createTandem( 'consequentNumberPicker' )
@@ -187,7 +187,7 @@ class MyChallengeAccordionBox extends AccordionBox {
     const readingBlockOptions = {
       children: [ myChallengeContent ],
       readingBlockHintResponse: ratioAndProportionStrings.a11y.create.myChallengeReadingBlockHintText,
-      readingBlockContent: voicingObjectResponse
+      readingBlockContent: createAccordionBoxContextResponse
     };
 
     const readingBlockNode = new ReadingBlockNode( readingBlockOptions );
@@ -203,9 +203,7 @@ class MyChallengeAccordionBox extends AccordionBox {
 
     const accordionBoxUtterance = new ActivationUtterance();
     this.expandedProperty.lazyLink( ( expanded: boolean ) => {
-      accordionBoxUtterance.alert = expanded ?
-                                    ratioDescriber.getCurrentChallengeSentence( targetAntecedentProperty.value, targetConsequentProperty.value ) :
-                                    ratioAndProportionStrings.a11y.ratio.currentChallengeHidden;
+      accordionBoxUtterance.alert = createAccordionBoxContextResponse();
       this.alertDescriptionUtterance( accordionBoxUtterance );
     } );
 

diff --git a/js/ratioAndProportionStrings.ts b/js/ratioAndProportionStrings.ts
@@ -161,8 +161,7 @@ type StringsType = {
       'tickMarkRangeHelpText': string,
       'tickMarkRangeContextResponse': string,
       'myChallengeHelpText': string,
-      'myChallengeVoicingExpandedHelpText': string,
-      'myChallengeVoicingCollapsedHelpText': string,
+      'myChallengeHintText': string,
       'antecedentToConsequentPattern': string,
       'hidden': string,
       'myChallengeReadingBlockHintText': string,

diff --git a/ratio-and-proportion-strings_en.json b/ratio-and-proportion-strings_en.json
@@ -410,10 +410,7 @@
       "myChallengeHelpText": {
         "value": "Set left and right values to create your challenge, then move hands to explore it."
       },
-      "myChallengeVoicingExpandedHelpText": {
-        "value": "Set left and right values to create your challenge."
-      },
-      "myChallengeVoicingCollapsedHelpText": {
+      "myChallengeHintText": {
         "value": "Expand to set your challenge."
       },
       "antecedentToConsequentPattern": {