add voicing to TickMarkViewRadioButtonGroup, #363

phetsims · Feb 7, 2022 · afb4781 · afb4781 · zepumph · Feb 7, 2022
1 parent def1127
commit afb4781
Showing 1 changed file with 55 additions and 34 deletions.
diff --git a/js/common/view/TickMarkViewRadioButtonGroup.ts b/js/common/view/TickMarkViewRadioButtonGroup.ts
@@ -7,7 +7,7 @@
  */
 
 import merge from '../../../../phet-core/js/merge.js';
-import { ParallelDOM, Path, PathOptions } from '../../../../scenery/js/imports.js';
+import { ParallelDOM, Path, PathOptions, voicingUtteranceQueue } from '../../../../scenery/js/imports.js';
 import eyeSlashSolidShape from '../../../../sherpa/js/fontawesome-5/eyeSlashSolidShape.js';
 import RectangularRadioButtonGroup from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
 import ActivationUtterance from '../../../../utterance-queue/js/ActivationUtterance.js';
@@ -16,6 +16,7 @@ import ratioAndProportionStrings from '../../ratioAndProportionStrings.js';
 import TickMarkView from './TickMarkView.js';
 import EnumerationProperty from '../../../../axon/js/EnumerationProperty.js';
 import optionize from '../../../../phet-core/js/optionize.js';
+import ResponsePacket from '../../../../utterance-queue/js/ResponsePacket.js';
 
 // constants
 const ICON_SCALE = 0.45;
@@ -40,42 +41,62 @@ class TickMarkViewRadioButtonGroup extends RectangularRadioButtonGroup<TickMarkV
       helpTextBehavior: ParallelDOM.HELP_TEXT_BEFORE_CONTENT
     }, options );
 
-    super( tickMarkViewProperty, [ {
-        node: new Path( eyeSlashSolidShape, { scale: 0.05, fill: 'black' } ),
-        value: TickMarkView.NONE,
-        labelContent: ratioAndProportionStrings.a11y.tickMark.showNo,
-        tandemName: 'showNoRadioButton'
-      }, {
-        node: new TickMarksIconPath(),
-        value: TickMarkView.VISIBLE,
-        labelContent: ratioAndProportionStrings.a11y.tickMark.show,
-        tandemName: 'showRadioButton'
-      }, {
-        node: new NumberedTickMarksIconPath(),
-        value: TickMarkView.VISIBLE_WITH_UNITS,
-        labelContent: ratioAndProportionStrings.a11y.tickMark.showNumbered,
-        tandemName: 'showNumberedRadioButton'
-      } ],
-      options );
+    const radioButtonItemData = [ {
+      node: new Path( eyeSlashSolidShape, { scale: 0.05, fill: 'black' } ),
+      value: TickMarkView.NONE,
+
+      interactiveDescriptionContextResponse: ratioAndProportionStrings.a11y.tickMark.tickMarksHidden,
+      voicingContextResponse: ratioAndProportionStrings.a11y.tickMark.tickMarksHidden,
+
+      // pdom
+      labelContent: ratioAndProportionStrings.a11y.tickMark.showNo,
+
+      // phet-io
+      tandemName: 'showNoRadioButton'
+    }, {
+      node: new TickMarksIconPath(),
+      value: TickMarkView.VISIBLE,
+
+      interactiveDescriptionContextResponse: ratioAndProportionStrings.a11y.tickMark.tickMarksShown,
+      voicingContextResponse: ratioAndProportionStrings.a11y.tickMark.tickMarksShown,
+
+      // pdom
+      labelContent: ratioAndProportionStrings.a11y.tickMark.show,
+
+      // phet-io
+      tandemName: 'showRadioButton'
+    }, {
+      node: new NumberedTickMarksIconPath(),
+      value: TickMarkView.VISIBLE_WITH_UNITS,
+
+      interactiveDescriptionContextResponse: ratioAndProportionStrings.a11y.tickMark.numberedTickMarksShown,
+      voicingContextResponse: ratioAndProportionStrings.a11y.tickMark.numberedTickMarksShown,
+
+      // pdom
+      labelContent: ratioAndProportionStrings.a11y.tickMark.showNumbered,
+
+      // phet-io
+      tandemName: 'showNumberedRadioButton'
+    } ];
+    super( tickMarkViewProperty, radioButtonItemData, options );
 
     const tickMarkContextResponseUtterance = new ActivationUtterance();
-    tickMarkViewProperty.lazyLink( ( tickMarkView: TickMarkView ) => {
-
-      switch( tickMarkView ) {
-        case TickMarkView.NONE:
-          tickMarkContextResponseUtterance.alert = ratioAndProportionStrings.a11y.tickMark.tickMarksHidden;
-          break;
-        case TickMarkView.VISIBLE:
-          tickMarkContextResponseUtterance.alert = ratioAndProportionStrings.a11y.tickMark.tickMarksShown;
-          break;
-
-        case TickMarkView.VISIBLE_WITH_UNITS:
-          tickMarkContextResponseUtterance.alert = ratioAndProportionStrings.a11y.tickMark.numberedTickMarksShown;
-          break;
-        default:
-          assert && assert( false, 'unsupported tickMarkView' );
-      }
+    const voicingResponsePacket = new ResponsePacket();
+    const tickMarkVoicingContextResponseUtterance = new ActivationUtterance( {
+      alert: voicingResponsePacket
+    } );
+    tickMarkViewProperty.lazyLink( tickMarkView => {
+      // TODO: likely we need this to run on user input, not the model Property, https://github.com/phetsims/ratio-and-proportion/issues/363
+
+      const currentRadioButtonItem = _.find( radioButtonItemData, item => item.value === tickMarkView )!;
+      assert && assert( currentRadioButtonItem, 'radio button item expected' );
+
+      voicingResponsePacket.nameResponse = currentRadioButtonItem.labelContent;
+      voicingResponsePacket.contextResponse = currentRadioButtonItem.voicingContextResponse;
+      voicingUtteranceQueue.addToBack( tickMarkVoicingContextResponseUtterance );
 
+      // interactive description alert
+      tickMarkContextResponseUtterance.alert = currentRadioButtonItem.interactiveDescriptionContextResponse;
       this.alertDescriptionUtterance( tickMarkContextResponseUtterance );
     } );
   }