add voicing to RectangularRadioButton(Group), #699

phetsims · Feb 23, 2022 · 5205eb7 · 5205eb7
1 parent b54052c
commit 5205eb7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/js/buttons/RectangularRadioButton.ts b/js/buttons/RectangularRadioButton.ts
@@ -138,6 +138,7 @@ class RectangularRadioButton<T> extends RectangularButton {
     buttonModel.downProperty.link( down => {
       if ( !down && ( buttonModel.overProperty.get() || buttonModel.focusedProperty.get() ) && !buttonModel.interrupted ) {
         this.fire();
+        this.voicingSpeakFullResponse();
       }
     } );
 

diff --git a/js/buttons/RectangularRadioButtonGroup.ts b/js/buttons/RectangularRadioButtonGroup.ts
@@ -18,6 +18,7 @@ import sun from '../sun.js';
 import RectangularRadioButton from './RectangularRadioButton.js';
 import TButtonAppearanceStrategy from './TButtonAppearanceStrategy.js';
 import Property from '../../../axon/js/Property.js';
+import { VoicingResponse } from '../../../utterance-queue/js/ResponsePacket.js';
 
 // constants
 const BUTTON_CONTENT_X_ALIGN_VALUES = [ 'center', 'left', 'right' ];
@@ -31,7 +32,8 @@ type RadioButtonItem<T> = {
   phetioDocumentation?: string, // optional documentation for PhET-iO
   tandemName?: string, // optional tandem for PhET-iO
   tandem?: never, // use tandemName instead of a Tandem instance
-  labelContent?: string // optional label for a11y
+  labelContent?: string // optional label for a11y (description and voicing)
+  voicingContextResponse?: VoicingResponse;
   descriptionContent?: string // optional label for a11y
 }
 
@@ -211,9 +213,10 @@ class RectangularRadioButtonGroup<T> extends LayoutBox {
         radioButtonGroupMemberOptions.tandem = options.tandem.createTandem( item.tandemName );
       }
 
-      // pdom create the label for the radio button
+      // create the label and voicing response for the radio button
       if ( item.labelContent ) {
         radioButtonGroupMemberOptions.labelContent = item.labelContent;
+        radioButtonGroupMemberOptions.voicingNameResponse = item.labelContent;
       }
 
       // pdom create description for radio button
@@ -222,6 +225,10 @@ class RectangularRadioButtonGroup<T> extends LayoutBox {
         radioButtonGroupMemberOptions.descriptionContent = item.descriptionContent;
       }
 
+      if ( item.voicingContextResponse ) {
+        radioButtonGroupMemberOptions.voicingContextResponse = item.voicingContextResponse;
+      }
+
       const radioButton = new RectangularRadioButton( property, item.value, radioButtonGroupMemberOptions );
 
       // pdom - so the browser recognizes these buttons are in the same group, see instanceCount for more info