From 39d36d74a1fa3b065742b6596e9eca28303d8883 Mon Sep 17 00:00:00 2001
From: Jesse <jesse.greenberg@colorado.edu>
Date: Mon, 10 Oct 2022 11:38:34 -0400
Subject: [PATCH] Instrument interactive components with Interactive
 Highlights, see https://github.com/phetsims/joist/issues/858

---
 js/intro/view/PipeNode.ts                  | 8 ++++++--
 js/leveling-out/view/DraggableChocolate.ts | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/js/intro/view/PipeNode.ts b/js/intro/view/PipeNode.ts
index df18dc63..725203a1 100644
--- a/js/intro/view/PipeNode.ts
+++ b/js/intro/view/PipeNode.ts
@@ -10,7 +10,7 @@
 import Vector2 from '../../../../dot/js/Vector2.js';
 import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
 import { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
-import { FireListener, Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js';
+import { FireListener, FocusHighlightFromNode, InteractiveHighlighting, Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import Pipe from '../model/Pipe.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
@@ -26,7 +26,7 @@ type PipeNodeOptions = SelfOptions & StrictOmit<NodeOptions, 'phetioDynamicEleme
 
 const LINE_WIDTH = 1;
 
-export default class PipeNode extends Node {
+export default class PipeNode extends InteractiveHighlighting( Node ) {
 
   // Public for traversal order
   public readonly valveNode: ValveNode;
@@ -85,6 +85,10 @@ export default class PipeNode extends Node {
     this.addInputListener( {
       click: () => handleFire()
     } );
+
+    // interactive highlighting - set a custom highlight because the pipe nodes have a unique combined highlight
+    // collectively in the ScreenView
+    this.interactiveHighlight = new FocusHighlightFromNode( this );
   }
 }
 
diff --git a/js/leveling-out/view/DraggableChocolate.ts b/js/leveling-out/view/DraggableChocolate.ts
index ba82079c..ae7af951 100644
--- a/js/leveling-out/view/DraggableChocolate.ts
+++ b/js/leveling-out/view/DraggableChocolate.ts
@@ -9,7 +9,7 @@
  */
 
 import meanShareAndBalance from '../../meanShareAndBalance.js';
-import { DragListener, Node, NodeOptions, Rectangle, Text } from '../../../../scenery/js/imports.js';
+import { DragListener, InteractiveHighlighting, Node, NodeOptions, Rectangle, Text } from '../../../../scenery/js/imports.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
@@ -24,7 +24,7 @@ type SelfOptions = EmptySelfOptions;
 type DraggableChocolateNodeOptions = SelfOptions & NodeOptions & PickRequired<NodeOptions, 'tandem'>;
 
 // TODO: Should this be renamed ChocolateBarNode?
-export default class DraggableChocolate extends Node {
+export default class DraggableChocolate extends InteractiveHighlighting( Node ) {
 
   public readonly chocolateBarDragListener: DragListener;
   public readonly chocolateBarModel: ChocolateBar;