From 97cde7ec343041a27b0cca0fd3f42ca7ace36bf0 Mon Sep 17 00:00:00 2001 From: zepumph Date: Tue, 19 Jun 2018 16:46:06 -0800 Subject: [PATCH] better a11y related scenery logging, https://github.com/phetsims/scenery/issues/715 --- js/accessibility/AccessibilityTests.js | 15 +++++++++++++ js/scenery.js | 7 ++++++ tests/playground.html | 30 +++++++++++++++++++------- 3 files changed, 44 insertions(+), 8 deletions(-) diff --git a/js/accessibility/AccessibilityTests.js b/js/accessibility/AccessibilityTests.js index fdd29fc7b..7f8aeb709 100644 --- 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' ); + } } ); \ No newline at end of file diff --git a/js/scenery.js b/js/scenery.js index d69c28ce6..d0170e3a9 100644 --- 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 index 1254e71e3..87d8706c4 100644 --- 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' } ) );
-
+