From 7cb2aacec9c7c2618596eb1169ad7f6a58365eb5 Mon Sep 17 00:00:00 2001
From: zepumph <michael.kauzmann@colorado.edu>
Date: Fri, 10 Jun 2022 15:52:14 -0600
Subject: [PATCH] bug fix combo box voicing on selection,
 https://github.com/phetsims/ratio-and-proportion/issues/474

---
 js/ComboBox.ts        |  1 +
 js/ComboBoxListBox.ts | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/js/ComboBox.ts b/js/ComboBox.ts
index c18c97c2..af5bd8a4 100644
--- a/js/ComboBox.ts
+++ b/js/ComboBox.ts
@@ -265,6 +265,7 @@ export default class ComboBox<T> extends WidthSizable( Node ) {
         this.button.blockNextVoicingFocusListener();
         this.button.focus();
       },
+      this.button,
       options.tandem.createTandem( 'listBox' ), {
         align: options.align,
         highlightFill: options.highlightFill,
diff --git a/js/ComboBoxListBox.ts b/js/ComboBoxListBox.ts
index 8593c558..afde0089 100644
--- a/js/ComboBoxListBox.ts
+++ b/js/ComboBoxListBox.ts
@@ -9,7 +9,7 @@
 import PhetioAction from '../../tandem/js/PhetioAction.js';
 import merge from '../../phet-core/js/merge.js';
 import optionize from '../../phet-core/js/optionize.js';
-import { IInputListener, IPaint, KeyboardUtils, SceneryEvent, SpeakingOptions, VBox } from '../../scenery/js/imports.js';
+import { IInputListener, IPaint, KeyboardUtils, SceneryEvent, SpeakingOptions, VBox, VoicingNode } from '../../scenery/js/imports.js';
 import multiSelectionSoundPlayerFactory from '../../tambo/js/multiSelectionSoundPlayerFactory.js';
 import generalCloseSoundPlayer from '../../tambo/js/shared-sound-players/generalCloseSoundPlayer.js';
 import generalOpenSoundPlayer from '../../tambo/js/shared-sound-players/generalOpenSoundPlayer.js';
@@ -44,15 +44,22 @@ export default class ComboBoxListBox<T> extends Panel {
   private visibleListItemNodes: ComboBoxListItemNode<T>[];
   private readonly disposeComboBoxListBox: () => void;
 
+  // We need a separate node to voice through because when a selection occurs, the list box is hidden, silencing any
+  // voicing responses occurring through Nodes within this class. This selection node should be visible when a combo
+  // box selection occurs, see https://github.com/phetsims/ratio-and-proportion/issues/474
+  private readonly voiceOnSelectionNode: VoicingNode;
+
   /**
    * @param property
    * @param items
    * @param hideListBoxCallback - called to hide the list box
    * @param focusButtonCallback - called to transfer focus to the combo box's button
+   * @param voiceOnSelectionNode - Node to voice the response when selecting a combo box item.
    * @param tandem
    * @param providedOptions
    */
-  public constructor( property: IProperty<T>, items: ComboBoxItem<T>[], hideListBoxCallback: () => void, focusButtonCallback: () => void, tandem: Tandem, providedOptions?: ComboBoxListBoxOptions ) {
+  public constructor( property: IProperty<T>, items: ComboBoxItem<T>[], hideListBoxCallback: () => void,
+                      focusButtonCallback: () => void, voiceOnSelectionNode: VoicingNode, tandem: Tandem, providedOptions?: ComboBoxListBoxOptions ) {
 
     const options = optionize<ComboBoxListBoxOptions, SelfOptions, PanelOptions>()( {
       highlightFill: 'rgb( 245, 245, 245 )',
@@ -173,6 +180,8 @@ export default class ComboBoxListBox<T> extends Panel {
 
     super( content, options );
 
+    this.voiceOnSelectionNode = voiceOnSelectionNode;
+
     // variable for tracking whether the selected value was changed by the user
     let selectionWhenListBoxOpened: T;
 
@@ -322,7 +331,7 @@ export default class ComboBoxListBox<T> extends Panel {
       // If there is no change in value, then there is no context response
       responseOptions.contextResponse = null;
     }
-    this.getListItemNode( newValue ).voicingSpeakFullResponse( responseOptions );
+    this.voiceOnSelectionNode.voicingSpeakFullResponse( responseOptions );
   }
 }