From 4f684709c94d27a968e54ce84464e0560f4641e0 Mon Sep 17 00:00:00 2001
From: Jonathan Olson <jonathan.olson@colorado.edu>
Date: Tue, 19 Dec 2023 14:40:32 -0700
Subject: [PATCH] AccessibleValueHandler dynamic options with mutate, see
 https://github.com/phetsims/sun/issues/865

---
 .../voicing/InteractiveHighlighting.ts        | 22 +++++++------------
 js/accessibility/voicing/Voicing.ts           |  3 ++-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/js/accessibility/voicing/InteractiveHighlighting.ts b/js/accessibility/voicing/InteractiveHighlighting.ts
index a5dac00b0..a14d59f76 100644
--- a/js/accessibility/voicing/InteractiveHighlighting.ts
+++ b/js/accessibility/voicing/InteractiveHighlighting.ts
@@ -45,31 +45,31 @@ const InteractiveHighlighting = memoize( <SuperType extends Constructor<Node>>(
     // A reference to the Pointer so that we can add and remove listeners from it when necessary.
     // Since this is on the trait, only one pointer can have a listener for this Node that uses InteractiveHighlighting
     // at one time.
-    private _pointer: null | Pointer;
+    private _pointer: null | Pointer = null;
 
     // A map that collects all of the Displays that this InteractiveHighlighting Node is
     // attached to, mapping the unique ID of the Instance Trail to the Display. We need a reference to the
     // Displays to activate the Focus Property associated with highlighting, and to add/remove listeners when
     // features that require highlighting are enabled/disabled. Note that this is updated asynchronously
     // (with updateDisplay) since Instances are added asynchronously.
-    protected displays: Record<string, Display>;
+    protected displays: Record<string, Display> = {};
 
     // The highlight that will surround this Node when it is activated and a Pointer is currently over it. When
     // null, the focus highlight will be used (as defined in ParallelDOM.js).
-    private _interactiveHighlight: Highlight;
+    private _interactiveHighlight: Highlight = null;
 
     // If true, the highlight will be layerable in the scene graph instead of drawn
     // above everything in the HighlightOverlay. If true, you are responsible for adding the interactiveHighlight
     // in the location you want in the scene graph. The interactiveHighlight will become visible when
     // this.interactiveHighlightActivated is true.
-    private _interactiveHighlightLayerable: boolean;
+    private _interactiveHighlightLayerable = false;
 
     // If true, the highlight will be displayed on activation input. If false, it will not and we can remove listeners
     // that would do this work.
-    private _interactiveHighlightEnabled: boolean;
+    private _interactiveHighlightEnabled = true;
 
     // Emits an event when the interactive highlight changes for this Node
-    public interactiveHighlightChangedEmitter: TEmitter;
+    public interactiveHighlightChangedEmitter: TEmitter = new TinyEmitter();
 
     // When new instances of this Node are created, adds an entry to the map of Displays.
     private readonly _changedInstanceListener: ( instance: Instance, added: boolean ) => void;
@@ -94,13 +94,6 @@ const InteractiveHighlighting = memoize( <SuperType extends Constructor<Node>>(
         down: this._onPointerDown.bind( this )
       };
 
-      this._pointer = null;
-      this.displays = {};
-      this._interactiveHighlight = null;
-      this._interactiveHighlightLayerable = false;
-      this._interactiveHighlightEnabled = true;
-      this.interactiveHighlightChangedEmitter = new TinyEmitter();
-
       this._changedInstanceListener = this.onChangedInstance.bind( this );
       this.changedInstanceEmitter.addListener( this._changedInstanceListener );
 
@@ -493,7 +486,8 @@ const InteractiveHighlighting = memoize( <SuperType extends Constructor<Node>>(
    * NOTE: See Node's _mutatorKeys documentation for more information on how this operates, and potential special
    *       cases that may apply.
    */
-  InteractiveHighlightingClass.prototype._mutatorKeys = INTERACTIVE_HIGHLIGHTING_OPTIONS.concat( InteractiveHighlightingClass.prototype._mutatorKeys );
+  InteractiveHighlightingClass.prototype._mutatorKeys = INTERACTIVE_HIGHLIGHTING_OPTIONS.concat( Type.prototype._mutatorKeys );
+
   assert && assert( InteractiveHighlightingClass.prototype._mutatorKeys.length ===
                     _.uniq( InteractiveHighlightingClass.prototype._mutatorKeys ).length,
     'duplicate mutator keys in InteractiveHighlighting' );
diff --git a/js/accessibility/voicing/Voicing.ts b/js/accessibility/voicing/Voicing.ts
index 98b0a421a..1932842e8 100644
--- a/js/accessibility/voicing/Voicing.ts
+++ b/js/accessibility/voicing/Voicing.ts
@@ -648,7 +648,8 @@ const Voicing = <SuperType extends Constructor<Node>>( Type: SuperType ) => { //
    * NOTE: See Node's _mutatorKeys documentation for more information on how this operates, and potential special
    *       cases that may apply.
    */
-  VoicingClass.prototype._mutatorKeys = VOICING_OPTION_KEYS.concat( VoicingClass.prototype._mutatorKeys );
+  VoicingClass.prototype._mutatorKeys = VOICING_OPTION_KEYS.concat( Type.prototype._mutatorKeys );
+
   assert && assert( VoicingClass.prototype._mutatorKeys.length === _.uniq( VoicingClass.prototype._mutatorKeys ).length, 'duplicate mutator keys in Voicing' );
 
   return VoicingClass;