better a11y related scenery logging, #715

phetsims · Jun 20, 2018 · 97cde7e · 97cde7e
1 parent 1955fc9
commit 97cde7e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/js/accessibility/AccessibilityTests.js b/js/accessibility/AccessibilityTests.js
@@ -16,9 +16,11 @@ define( function( require ) {
   var Display = require( 'SCENERY/display/Display' );
   var Node = require( 'SCENERY/nodes/Node' );
   var Rectangle = require( 'SCENERY/nodes/Rectangle' );
+  var scenery = require( 'SCENERY/scenery' );
 
   QUnit.module( 'Accessibility' );
 
+  // constants
   var TEST_INNER_CONTENT = 'Test Inner Content Here please^&*. Thanks you so very mucho.';
   var TEST_LABEL = 'Test label';
   var TEST_LABEL_2 = 'Test label 2';
@@ -41,6 +43,11 @@ define( function( require ) {
   // a focus highlight for testing, since dummy nodes tend to have no bounds
   var TEST_HIGHLIGHT = new Circle( 5 );
 
+  // add scenery logging for a11y in this unit test module, make sure it is turned off at the end of the file.
+  if ( window.location.search.indexOf( 'a11yLog' ) >= 0 ) {
+    scenery.enableLogging( ['a11y'] );
+  }
+
   /**
    * Get the id of a dom element representing a node in the DOM.  The accessible content must exist and be unique,
    * there should only be one accessible instance and one dom element for the node.
@@ -1192,4 +1199,12 @@ define( function( require ) {
     }
     assert.expect( 0 );
   } );
+
+  // remove the logging that we added at the top
+  if ( window.location.search.indexOf( 'a11yLog' ) >= 0 ) {
+    scenery.disableIndividualLog( 'Accessibility' );
+    scenery.disableIndividualLog( 'AccessibleInstance' );
+    scenery.disableIndividualLog( 'AccessibilityTree' );
+    scenery.disableIndividualLog( 'AccessibleDisplaysInfo' );
+  }
 } );
diff --git a/js/scenery.js b/js/scenery.js
@@ -158,6 +158,13 @@ define( function( require ) {
         this.enableIndividualLog( 'EventDispatch' );
         return;
       }
+      if ( name === 'a11y' ) {
+        this.enableIndividualLog( 'Accessibility' );
+        this.enableIndividualLog( 'AccessibleInstance' );
+        this.enableIndividualLog( 'AccessibilityTree' );
+        this.enableIndividualLog( 'AccessibleDisplaysInfo' );
+        return;
+      }
 
       if ( name ) {
         assert && assert( logProperties[ name ],

diff --git a/tests/playground.html b/tests/playground.html
@@ -132,8 +132,9 @@
 
       window.accessibleTest = function() {
         setTimeout( function() {
-          scenery.enableLogging( [ 'Accessibility', 'AccessibleInstance', 'AccessibilityTree', 'AccessibleDisplaysInfo' ] );
-          toggleA11yDebug();
+
+          // with scenery logging for a11y
+          toggleA11yDebug( true );
           toggleUpdates();
 
           scene.tagName = 'div';
@@ -174,9 +175,10 @@
 
       window.debugAccessibleInstances = function() {
         recurse( display._rootAccessibleInstance, '' );
+
         function recurse( instance, indentation ) {
           console.log( indentation + ( instance.isRootInstance ? '' : instance.node.tagName ) + ' ' + instance.toString() );
-          instance.children.forEach( child => recurse( child, indentation + '  ' ) );
+          instance.children.forEach( function( child ) { recurse( child, indentation + '  ' ) } );
         }
       };
 
@@ -349,12 +351,23 @@
         a11yDebug.innerHTML = display.getAccessibleDebugHTML();
       }
 
-      window.toggleA11yDebug = function() {
+      /**
+       * @param {boolean} withSceneryLog
+       */
+      window.toggleA11yDebug = function( withSceneryLog ) {
         if ( a11yDebugging ) {
+          if ( window.location.search.indexOf( 'a11yLog' ) >= 0 || withSceneryLog ) {
+            scenery.disableLogging();
+          }
+
           window.cancelAnimationFrame( a11yDebuggingRequestID );
           a11yDebug.style.display = 'none';
         }
         else {
+          if ( window.location.search.indexOf( 'a11yLog' ) >= 0 || withSceneryLog ) {
+            scenery.enableLogging( [ 'a11y' ] );
+          }
+
           a11yDebugStep();
         }
 
@@ -406,14 +419,15 @@
             id="a11y-input">window.scene.addChild(  new window.scenery.Node( { tagName: 'button' } ) );</textarea>
   <textarea rows="20" cols="40" placeholder="HTML will appear here" id="a11y-output"></textarea>
   <br/>
-  <input type="checkbox" id="keep-previous" /><label for="keep-previous">Keep previous children of the root node</label><br/>
+  <input type="checkbox" id="keep-previous"/><label for="keep-previous">Keep previous children of the root
+  node</label><br/>
   <button id="getHTML">Get HTML from Nodes</button>
   <script>
     document.getElementById( 'getHTML' ).addEventListener( 'click', function() {
       var inputText = document.getElementById( 'a11y-input' ).value;
 
       if ( inputText ) {
-        if( !document.getElementById( 'keep-previous').checked ){
+        if ( !document.getElementById( 'keep-previous' ).checked ) {
           window.scene.children = [];
         }
         eval( inputText );
@@ -423,8 +437,8 @@
 
     } );
 
-    window.togglePDOMPlayground = function(){
-      document.getElementById( 'pdom-playground' ).classList.toggle( 'hidden');
+    window.togglePDOMPlayground = function() {
+      document.getElementById( 'pdom-playground' ).classList.toggle( 'hidden' );
     }
   </script>
 </div>