Use the Highlight type throughout where you can set a highlight for t…

…he HighlightOverlay, see #1372

js/accessibility/pdom/ParallelDOM.ts

@@ -131,7 +131,8 @@ import merge from '../../../../phet-core/js/merge.js';
 import PhetioObject, { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
 import UtteranceQueue from '../../../../utterance-queue/js/UtteranceQueue.js';
 import { IAlertable } from '../../../../utterance-queue/js/Utterance.js';
-import { scenery, Node, Trail, PDOMInstance, PDOMPeer, PDOMTree, PDOMUtils, PDOMDisplaysInfo } from '../../imports.js';
+import { Node, PDOMDisplaysInfo, PDOMInstance, PDOMPeer, PDOMTree, PDOMUtils, scenery, Trail } from '../../imports.js';
+import { Highlight } from '../../overlays/HighlightOverlay.js';
 
 const INPUT_TAG = PDOMUtils.TAGS.INPUT;
 const P_TAG = PDOMUtils.TAGS.P;
@@ -251,7 +252,7 @@ type ParallelDOMOptions = {
   descriptionContent?: string | null,
   appendDescription?: boolean,
 
-  focusHighlight?: Node | Shape | 'invisible' | null,
+  focusHighlight?: Highlight,
   focusHighlightLayerable?: boolean,
   groupFocusHighlight?: Node | boolean,
   pdomVisible?: boolean,
@@ -1463,12 +1464,7 @@ class ParallelDOM extends PhetioObject {
    * surrounds the node's local bounds.  If focus highlight is set to 'invisible', the node will not have
    * any highlighting when it receives focus.
    */
-  setFocusHighlight( focusHighlight: Node | Shape | 'invisible' | null ) {
-    assert && assert( focusHighlight === null ||
-                      focusHighlight instanceof Node ||
-                      focusHighlight instanceof Shape ||
-                      focusHighlight === 'invisible' );
-
+  setFocusHighlight( focusHighlight: Highlight ) {
     if ( this._focusHighlight !== focusHighlight ) {
       this._focusHighlight = focusHighlight;
 
@@ -1487,16 +1483,16 @@ class ParallelDOM extends PhetioObject {
     }
   }
 
-  set focusHighlight( focusHighlight: Node | Shape | 'invisible' | null ) { this.setFocusHighlight( focusHighlight ); }
+  set focusHighlight( focusHighlight: Highlight ) { this.setFocusHighlight( focusHighlight ); }
 
   /**
    * Get the focus highlight for this node.
    */
-  getFocusHighlight(): Node | Shape | 'invisible' | null {
+  getFocusHighlight(): Highlight {
     return this._focusHighlight;
   }
 
-  get focusHighlight(): Node | Shape | 'invisible' | null { return this.getFocusHighlight(); }
+  get focusHighlight(): Highlight { return this.getFocusHighlight(); }
 
   /**
    * Setting a flag to break default and allow the focus highlight to be (z) layered into the scene graph.

js/accessibility/voicing/InteractiveHighlighting.ts

@@ -7,7 +7,6 @@
  */
 
 import TinyEmitter from '../../../../axon/js/TinyEmitter.js';
-import { Shape } from '../../../../kite/js/imports.js';
 import Constructor from '../../../../phet-core/js/types/Constructor.js';
 import IntentionalAny from '../../../../phet-core/js/types/IntentionalAny.js';
 import inheritance from '../../../../phet-core/js/inheritance.js';
@@ -22,7 +21,7 @@ const INTERACTIVE_HIGHLIGHTING_OPTIONS = [
 ];
 
 type InteractiveHighlightingSelfOptions = {
-  interactiveHighlight?: Node | Shape | null | 'invisible',
+  interactiveHighlight?: Highlight,
   interactiveHighlightLayerable?: boolean
 };
 
@@ -83,7 +82,7 @@ const InteractiveHighlighting = <SuperType extends Constructor>( Type: SuperType
 
     // 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).
-    _interactiveHighlight: Shape | Node | null | 'invisible';
+    _interactiveHighlight: Highlight;
 
     // 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
@@ -158,7 +157,7 @@ const InteractiveHighlighting = <SuperType extends Constructor>( Type: SuperType
      * Set the interactive highlight for this node. By default, the highlight will be a pink rectangle that surrounds
      * the node's local bounds.
      */
-    setInteractiveHighlight( interactiveHighlight: Node | Shape | null | 'invisible' ) {
+    setInteractiveHighlight( interactiveHighlight: Highlight ) {
 
       if ( this._interactiveHighlight !== interactiveHighlight ) {
         this._interactiveHighlight = interactiveHighlight;
@@ -176,16 +175,16 @@ const InteractiveHighlighting = <SuperType extends Constructor>( Type: SuperType
       }
     }
 
-    set interactiveHighlight( interactiveHighlight: Node | Shape | null | 'invisible' ) { this.setInteractiveHighlight( interactiveHighlight ); }
+    set interactiveHighlight( interactiveHighlight: Highlight ) { this.setInteractiveHighlight( interactiveHighlight ); }
 
     /**
      * Returns the interactive highlight for this Node.
      */
-    getInteractiveHighlight(): Node | Shape | null | 'invisible' {
+    getInteractiveHighlight(): Highlight {
       return this._interactiveHighlight;
     }
 
-    get interactiveHighlight(): Node | Shape | null | 'invisible' { return this.getInteractiveHighlight(); }
+    get interactiveHighlight(): Highlight { return this.getInteractiveHighlight(); }
 
     /**
      * Sets whether the highlight is layerable in the scene graph instead of above everything in the

js/accessibility/voicing/ReadingBlock.ts

@@ -113,7 +113,7 @@ const ReadingBlock = <SuperType extends Constructor>( Type: SuperType, optionsAr
     // The highlight that surrounds this ReadingBlock when it is "active" and
     // the Voicing framework is speaking the content associated with this Node. By default, a semi-transparent
     // yellow highlight surrounds this Node's bounds.
-    _readingBlockActiveHighlight: null | Shape | Node;
+    _readingBlockActiveHighlight: Highlight;
 
     // (scenery-internal) - Sends a message when the highlight for the ReadingBlock changes. Used
     // by the HighlightOverlay to redraw it if it changes while the highlight is active.
@@ -232,25 +232,25 @@ const ReadingBlock = <SuperType extends Constructor>( Type: SuperType, optionsAr
      * Sets the highlight used to surround this Node while the Voicing framework is speaking this content.
      * Do not add this Node to the scene graph, it is added and made visible by the HighlightOverlay.
      */
-    setReadingBlockActiveHighlight( readingBlockActiveHighlight: Node | Shape | null ) {
+    setReadingBlockActiveHighlight( readingBlockActiveHighlight: Highlight ) {
       if ( this._readingBlockActiveHighlight !== readingBlockActiveHighlight ) {
         this._readingBlockActiveHighlight = readingBlockActiveHighlight;
 
         this.readingBlockActiveHighlightChangedEmitter.emit();
       }
     }
 
-    set readingBlockActiveHighlight( readingBlockActiveHighlight: Node | Shape | null ) { this.setReadingBlockActiveHighlight( readingBlockActiveHighlight ); }
+    set readingBlockActiveHighlight( readingBlockActiveHighlight: Highlight ) { this.setReadingBlockActiveHighlight( readingBlockActiveHighlight ); }
 
     /**
      * Returns the highlight used to surround this Node when the Voicing framework is reading its
      * content.
      */
-    getReadingBlockActiveHighlight(): Node | Shape | null {
+    getReadingBlockActiveHighlight(): Highlight {
       return this._readingBlockActiveHighlight;
     }
 
-    get readingBlockActiveHighlight(): Node | Shape | null { return this._readingBlockActiveHighlight; }
+    get readingBlockActiveHighlight(): Highlight { return this._readingBlockActiveHighlight; }
 
     /**
      * Returns true if this ReadingBlock is "activated", indicating that it has received interaction

js/overlays/HighlightOverlay.ts

@@ -437,7 +437,10 @@ class HighlightOverlay implements IOverlay {
 
     this.addedReadingBlockHighlight = readingBlockHighlight;
 
-    if ( readingBlockHighlight instanceof Shape ) {
+    if ( readingBlockHighlight === 'invisible' ) {
+      // nothing to draw
+    }
+    else if ( readingBlockHighlight instanceof Shape ) {
       this.readingBlockHighlightPath.setShape( readingBlockHighlight );
       this.readingBlockHighlightPath.visible = true;
     }