From ddb02404eee474d6998f752ba57078345238c1cf Mon Sep 17 00:00:00 2001
From: Michael Kauzmann <michael.kauzmann@colorado.edu>
Date: Wed, 23 Nov 2022 16:17:52 -0700
Subject: [PATCH] support dynamic locale for voicing name responses,
 https://github.com/phetsims/ratio-and-proportion/issues/528

---
 js/ComboBoxButton.ts       |  8 ++++++--
 js/ComboBoxListItemNode.ts | 10 +++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/js/ComboBoxButton.ts b/js/ComboBoxButton.ts
index a325c4b9..3eaf33be 100644
--- a/js/ComboBoxButton.ts
+++ b/js/ComboBoxButton.ts
@@ -9,7 +9,6 @@
 
 import { Shape } from '../../kite/js/imports.js';
 import optionize from '../../phet-core/js/optionize.js';
-import StringUtils from '../../phetcommon/js/util/StringUtils.js';
 import { AriaHasPopUpMutator, GridBox, Line, Node, Path, PDOMBehaviorFunction, PDOMPeer, TPaint } from '../../scenery/js/imports.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import ButtonNode from './buttons/ButtonNode.js';
@@ -23,6 +22,8 @@ import StrictOmit from '../../phet-core/js/types/StrictOmit.js';
 import ComboBox, { ComboBoxItem } from './ComboBox.js';
 import Multilink from '../../axon/js/Multilink.js';
 import TReadOnlyProperty from '../../axon/js/TReadOnlyProperty.js';
+import PatternStringProperty from '../../axon/js/PatternStringProperty.js';
+import Property from '../../axon/js/Property.js';
 
 // constants
 const ALIGN_VALUES = [ 'left', 'center', 'right' ] as const;
@@ -243,7 +244,10 @@ export default class ComboBoxButton<T> extends RectangularPushButton {
 
       // pdom
       this.innerContent = ( item.a11yLabel || null );
-      this.voicingNameResponse = StringUtils.fillIn( options.comboBoxVoicingNameResponsePattern, {
+      const patternProperty = typeof options.comboBoxVoicingNameResponsePattern === 'string' ?
+                              new Property( options.comboBoxVoicingNameResponsePattern ) :
+                              options.comboBoxVoicingNameResponsePattern;
+      this.voicingNameResponse = new PatternStringProperty( patternProperty, {
         value: item.a11yLabel
       } );
     };
diff --git a/js/ComboBoxListItemNode.ts b/js/ComboBoxListItemNode.ts
index 6017a8aa..c2f4f71b 100644
--- a/js/ComboBoxListItemNode.ts
+++ b/js/ComboBoxListItemNode.ts
@@ -11,13 +11,14 @@
 import { Shape } from '../../kite/js/imports.js';
 import StrictOmit from '../../phet-core/js/types/StrictOmit.js';
 import optionize from '../../phet-core/js/optionize.js';
-import StringUtils from '../../phetcommon/js/util/StringUtils.js';
-import { IndexedNodeIO, TPaint, Node, NodeOptions, Rectangle, Voicing, VoicingOptions } from '../../scenery/js/imports.js';
+import { IndexedNodeIO, Node, NodeOptions, Rectangle, TPaint, Voicing, VoicingOptions } from '../../scenery/js/imports.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import sun from './sun.js';
 import SunConstants from './SunConstants.js';
 import { ComboBoxItem } from './ComboBox.js';
 import TReadOnlyProperty from '../../axon/js/TReadOnlyProperty.js';
+import Property from '../../axon/js/Property.js';
+import PatternStringProperty from '../../axon/js/PatternStringProperty.js';
 
 type SelfOptions = {
   align?: 'left' | 'right' | 'center';
@@ -94,7 +95,10 @@ export default class ComboBoxListItemNode<T> extends Voicing( Node ) {
     // pdom: get innerContent from the item
     options.innerContent = ( item.a11yLabel || null );
     options.voicingObjectResponse = ( item.a11yLabel || null );
-    options.voicingNameResponse = StringUtils.fillIn( options.comboBoxVoicingNameResponsePattern, {
+    const patternProperty = typeof options.comboBoxVoicingNameResponsePattern === 'string' ?
+                            new Property( options.comboBoxVoicingNameResponsePattern ) :
+                            options.comboBoxVoicingNameResponsePattern;
+    options.voicingNameResponse = new PatternStringProperty( patternProperty, {
       value: item.a11yLabel
     } );