From 17645a7ad98b2177524b9cc9e61b5d0a9660a82c Mon Sep 17 00:00:00 2001
From: Jesse <jesse.greenberg@colorado.edu>
Date: Thu, 17 Jun 2021 14:48:12 -0400
Subject: [PATCH] Control Area before Play Area in rendering order, but keep
 the PDOM order the same, see https://github.com/phetsims/joist/issues/722

---
 js/ScreenView.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/js/ScreenView.js b/js/ScreenView.js
index 568bd125..9fcb66a4 100644
--- a/js/ScreenView.js
+++ b/js/ScreenView.js
@@ -125,14 +125,25 @@ class ScreenView extends Node {
 
     // @private
     this.pdomParentNode = new Node( {
+
+      // order of Nodes for the PDOM that makes most sense for graphical rendering, "Play Area" components
+      // on top of "Control Area" components.
       children: options.includePDOMNodes ? [
         this.pdomTitleNode,
         this.pdomScreenSummaryNode,
-        this.pdomPlayAreaNode,
-        this.pdomControlAreaNode
+        this.pdomControlAreaNode,
+        this.pdomPlayAreaNode
       ] : [ this.pdomTitleNode ]
     } );
     this.addChild( this.pdomParentNode );
+
+    // pdom - "Play Area" comes before "Control Area" in PDOM
+    this.pdomParentNode.pdomOrder = options.includePDOMNodes ? [
+      this.pdomTitleNode,
+      this.pdomScreenSummaryNode,
+      this.pdomPlayAreaNode,
+      this.pdomControlAreaNode
+    ] : [ this.pdomTitleNode ];
   }
 
   /**