Keep peer bounds synchronized, see #41

js/Scene.js

@@ -117,8 +117,10 @@ define( function( require ) {
 
     this.accessibilityLayer = document.createElement( 'div' );
     this.accessibilityLayer.className = "accessibility-layer";
-    this.accessibilityLayer.style.zIndex = 9999;
-    this.accessibilityLayer.style.position = 'absolute';
+
+    //Put the accessibility layer behind the background so it cannot be seen.  Change this to some high number like 9999 to show it for debugging purposes.
+    this.accessibilityLayer.style.zIndex = -1;
+    this.accessibilityLayer.style.position = 'relative';
     this.$accessibilityLayer = $( this.accessibilityLayer );
     $main[0].appendChild( this.accessibilityLayer );
 
@@ -136,6 +138,8 @@ define( function( require ) {
       assert && assert( scene.activePeer, 'scene should have an active peer when changing the focus ring bounds' );
       scene.focusRingPath.setAttribute( 'd', Shape.bounds( scene.activePeer.getGlobalBounds() ).getSVGPath() );
     }};
+
+    this.resizeListeners = [];
   };
   var Scene = scenery.Scene;
 
@@ -1009,8 +1013,13 @@ define( function( require ) {
 
     //Update the focus ring when the scene resizes.  Note: as of 5/10/2013 this only works properly when scaling up, and is buggy (off by a translation) when scaling down
     if ( this.updateFocusRing && this.activePeer) {
+//      this.updateScene();
       this.updateFocusRing.bounds.call();
     }
+
+    _.each( this.resizeListeners, function( resizeListener ) {
+      resizeListener();
+    } );
   };
 
   Scene.prototype.resizeAccessibilityLayer = function( width, height ) {

js/util/AccessibilityPeer.js

@@ -50,7 +50,19 @@ define( function( require ) {
     this.element.addEventListener( 'click', this.clickListener );
     this.element.addEventListener( 'focus', this.focusListener );
     this.element.addEventListener( 'blur', this.blurListener );
-  };
+
+    var keepPeerBoundsInSync = true;
+    if ( keepPeerBoundsInSync ) {
+      instance.node.addEventListener( {bounds: this.syncBounds.bind( this )} );
+      this.syncBounds();
+
+      //When the scene resizes, update the peer bounds
+      instance.trail.nodes[0].resizeListeners.push( this.syncBounds.bind( this ) );
+
+      //Initial layout
+      window.setTimeout( this.syncBounds.bind( this ), 30 );
+    }
+  }; 
 
   AccessibilityPeer.prototype = {
     constructor: AccessibilityPeer,
@@ -67,15 +79,10 @@ define( function( require ) {
 
     syncBounds: function() {
       var globalBounds = this.getGlobalBounds();
-      //TODO: add checks in here that will only set the values if changed
       this.element.style.left = globalBounds.x + 'px';
       this.element.style.top = globalBounds.y + 'px';
       this.element.style.width = globalBounds.width + 'px';
       this.element.style.height = globalBounds.height + 'px';
-      // this.$element.css( 'left', globalBounds.x );
-      // this.$element.css( 'top', globalBounds.y );
-      // this.$element.width( globalBounds.width );
-      // this.$element.height( globalBounds.height );
     }
   };