move functionality to be more private to ScreenView, phetsims/ratio-a…

…nd-proportion#321

js/ScreenView.js

@@ -99,13 +99,25 @@ class ScreenView extends Node {
     // at the Node from options in the same way that can be done at any time
     options.screenSummaryContent && this.setScreenSummaryContent( options.screenSummaryContent );
 
+    // To make sure that the title "h1" is the first, focused item on a screen when that screen is selected, toggle the
+    // focusability of the title, and then focus it. See https://github.com/phetsims/ratio-and-proportion/issues/321
+    this.visibleProperty.lazyLink( visible => {
+      if ( visible ) {
+        assert && assert( !this.pdomTitleNode.focusable, 'about to set to be focusable' );
+        this.pdomTitleNode.focusable = true;
+        this.pdomTitleNode.focus();
+      }
+      else {
+        this.pdomTitleNode.focusable = false;
+      }
+    } );
+
     // after initial focus, the titleNode should be removed from the focus order
     this.pdomTitleNode.addInputListener( {
       blur: () => {
         this.pdomTitleNode.focusable = false;
       }
     } );
-
     // @private
     this.pdomParentNode = new Node( {
       children: options.includePDOMNodes ? [
@@ -198,27 +210,6 @@ class ScreenView extends Node {
     this.pdomTitleNode.innerContent = simTitle;
   }
 
-  /**
-   * Focus the h1 title of this screen view (the first thing in the screen). Once focus is moved,
-   * the current ScreenView is removed from focus order, see blur listener above in constructor.
-   * @public
-   */
-  focusTitle() {
-    assert && assert( !this.pdomTitleNode.focusable, 'about to set to be focusable' );
-    this.pdomTitleNode.focusable = true;
-    this.pdomTitleNode.focus();
-  }
-
-  /**
-   * Remove focus from the h1 title of this screen view. There are cases where the screen can change
-   * but never receive the blur event (like if the sim is running in a background tab).
-   *
-   * @public
-   */
-  blurTitle() {
-    this.pdomTitleNode.focusable = false;
-  }
-
   /**
    * Get the scale to use for laying out the sim components and the navigation bar, so its size will track
    * with the sim size

js/Sim.js

@@ -774,17 +774,10 @@ class Sim {
         screen.view.setVisible( visible );
         if ( !visible ) {
           screen.activeProperty.set( visible );
-
-          // in case the title did not receive a blur event, make sure it is no longer focusable when
-          // changing screens
-          screen.view.blurTitle();
         }
       } );
       this.updateBackground();
 
-      // When a new screen is made visible focus should start at the top of the screen.
-      currentScreen.view.focusTitle();
-
       if ( !this.isSettingPhetioStateProperty.value ) {
 
         // Zoom out again after changing screens so we don't pan to the center of the focused ScreenView,