convert Voicing to typescript and the new mixin pattern, phetsims/sce…

…nery#1340

js/JoistButton.js

@@ -16,7 +16,7 @@ import PushButtonModel from '../../sun/js/buttons/PushButtonModel.js';
 import HighlightNode from './HighlightNode.js';
 import joist from './joist.js';
 
-class JoistButton extends Node {
+class JoistButton extends Voicing( Node ) {
 
   /**
    * @param {Node} content - the scenery node to render as the content of the button
@@ -67,9 +67,6 @@ class JoistButton extends Node {
 
     super();
 
-    // voicing - initialize the voicing trait
-    this.initializeVoicing();
-
     // We want to mutate eagerly, but must do so after initializing Voicing properties
     this.mutate( options );
 
@@ -124,7 +121,5 @@ class JoistButton extends Node {
   }
 }
 
-Voicing.compose( JoistButton );
-
 joist.register( 'JoistButton', JoistButton );
 export default JoistButton;

js/KeyboardHelpDialog.js

@@ -88,7 +88,7 @@ class KeyboardHelpDialog extends Dialog {
  * An inner class that assembles the "Tab to get started" content of the Dialog title. This content
  * is interactive with Voicing in that it can be clicked to hear this content (when Voicing is enabled).
  */
-class TabHintLine extends Node {
+class TabHintLine extends ReadingBlock( Node ) {
 
   /**
    * @mixes ReadingBlock
@@ -114,12 +114,9 @@ class TabHintLine extends Node {
     // labelWithIcon is meant to be passed to KeyboardHelpSection, so we have to hack a bit here
     this.addChild( new HBox( { children: [ labelWithIcon.icon, labelWithIcon.label ], spacing: 4 } ) );
 
-    this.initializeReadingBlock();
     this.mutate( options );
   }
 }
 
-ReadingBlock.compose( TabHintLine );
-
 joist.register( 'KeyboardHelpDialog', KeyboardHelpDialog );
 export default KeyboardHelpDialog;

js/preferences/PreferencesTabs.js

@@ -148,7 +148,7 @@ class PreferencesTabs extends Node {
  * Inner class, a single tab for the list of tabs.
  * @mixes Voicing
  */
-class Tab extends Node {
+class Tab extends Voicing( Node ) {
 
   /**
    * @param {string} label - text label for the tab
@@ -185,8 +185,6 @@ class Tab extends Node {
     // @public {PreferenceTab}
     this.value = value;
 
-    // voicing
-    this.initializeVoicing();
     this.voicingNameResponse = StringUtils.fillIn( preferencesTabResponsePatternString, {
       title: label
     } );
@@ -216,7 +214,5 @@ class Tab extends Node {
   }
 }
 
-Voicing.compose( Tab );
-
 joist.register( 'PreferencesTabs', PreferencesTabs );
 export default PreferencesTabs;

js/preferences/VoicingPanelSection.js

@@ -319,7 +319,7 @@ const createCheckbox = ( labelString, property ) => {
  * @param {NumberProperty} voiceRateProperty
  * @returns {NumberControl}
  */
-class VoiceRateNumberControl extends NumberControl {
+class VoiceRateNumberControl extends Voicing( NumberControl ) {
   constructor( labelString, a11yLabelString, voiceRateProperty ) {
     super( labelString, voiceRateProperty, voiceRateProperty.range, {
       includeArrowButtons: false,
@@ -350,9 +350,6 @@ class VoiceRateNumberControl extends NumberControl {
       tandem: Tandem.OPT_OUT
     } );
 
-    // voicing
-    this.initializeVoicing();
-
     this.slider.addInputListener( {
       focus: event => {
         this.voicingSpeakFullResponse();
@@ -390,8 +387,6 @@ class VoiceRateNumberControl extends NumberControl {
   }
 }
 
-Voicing.compose( VoiceRateNumberControl );
-
 /**
  * Inner class for the ComboBox that selects the voice for the voicingManager. This ComboBox can be created and destroyed
  * a few times as the browser list of supported voices may change while the SpeechSynthesis is first getting put to
@@ -446,7 +441,7 @@ class VoiceComboBox extends ComboBox {
  * @param {NumberProperty} voicePitchProperty
  * @returns {VBox}
  */
-class VoicingPitchSlider extends VBox {
+class VoicingPitchSlider extends Voicing( VBox ) {
 
   /**
    * @param labelString
@@ -485,8 +480,6 @@ class VoicingPitchSlider extends VBox {
 
     super();
 
-    this.initializeVoicing();
-
     slider.addInputListener( {
       focus: event => {
         this.voicingSpeakFullResponse();
@@ -537,7 +530,5 @@ class VoicingPitchSlider extends VBox {
   }
 }
 
-Voicing.compose( VoicingPitchSlider );
-
 joist.register( 'VoicingPanelSection', VoicingPanelSection );
 export default VoicingPanelSection;