initial commit for accessible sibling unit tests, see #852

js/accessibility/AccessibleSiblingStyle.js

@@ -21,8 +21,6 @@ define( require => {
 
   // All elements that use AccessibilityUtil.createElement should have this style. The only exception is the root of
   // the PDOM, which should use 'a11y-root' class attributes instead.
-  // Additional notes about attributes that should not be used:
-  //  - padding: 0px; - might assist with correct viewport bounds, but prevents <input> from having defined width
   SceneryStyle.addRule( '.' + SIBLING_CLASS_NAME +
     '{' +
       // fixed to the 'relative' styled root element, to be transformed with left/top
@@ -40,6 +38,8 @@ define( require => {
 
       // helps get accurate bounds with getBoundingClientRect() for transformations
       'border-width: 0px;' +
+      'border: 0px;' +
+      'padding: 1px 1px;' + // cannot be zero, otherwise certain elements will have undefined width and height
       'margin: 0px;' +
       'white-space: nowrap;' +
 

js/accessibility/AccessibleSiblingTests.js

@@ -0,0 +1,61 @@
+// Copyright 2017, University of Colorado Boulder
+
+/**
+ * Tests for styling accessibility siblings. Siblings should be positioned on top of other elements in the PDOM.
+ *
+ * @author Jesse Greenberg (PhET Interactive Simulations)
+ */
+define( function( require ) {
+  'use strict';
+
+  // modules
+  // const AccessibilityUtil = require( 'SCENERY/accessibility/AccessibilityUtil' );
+  const Bounds2 = require( 'DOT/Bounds2' );
+  const Display = require( 'SCENERY/display/Display' );
+  const Node = require( 'SCENERY/nodes/Node' );
+  const Rectangle = require( 'SCENERY/nodes/Rectangle' );
+
+  // constants
+  const PIXEL_PADDING = 3;
+
+  QUnit.module( 'AccessibleSiblingTests' );
+
+  /**
+   * Returns true if the node's first accessible peer has a primary sibling with bounds thar are correctly positioned
+   * in the viewport. Some padding is required for the HTML elements to have defined bounds, so we allow a few pixels
+   * of error.
+   * @param  {Node} node
+   * @returns {boolean}
+   */
+  const siblingBoundsCorrect = node => {
+    const nodeBounds = node.globalBounds;
+
+    const siblingRect = node.accessibleInstances[ 0 ].peer.primarySibling.getBoundingClientRect();
+    const siblingBounds = new Bounds2( siblingRect.x, siblingRect.y, siblingRect.x + siblingRect.width, siblingRect.y + siblingRect.height );
+
+    return nodeBounds.equalsEpsilon( siblingBounds, PIXEL_PADDING );
+  };
+
+  // tests
+  QUnit.test( 'sibling positioning', function( assert ) {
+
+    const rootNode = new Node( { tagName: 'div' } );
+    const display = new Display( rootNode ); // eslint-disable-line
+    document.body.appendChild( display.domElement );
+
+    const buttonElement = new Rectangle( 5, 5, 5, 5, { tagName: 'button' } );
+    const divElement = new Rectangle( 0, 0, 20, 20, { tagName: 'div', focusable: true } );
+    const inputElement = new Rectangle( 10, 3, 25, 5, { tagName: 'input', inputType: 'range' } );
+
+    rootNode.addChild( buttonElement );
+    rootNode.addChild( divElement );
+    rootNode.addChild( inputElement );
+
+    // udpdate so the display to position elements
+    display.updateDisplay();
+
+    assert.ok( siblingBoundsCorrect( buttonElement ), 'button element child of root correctly positioned' );
+    assert.ok( siblingBoundsCorrect( divElement ), 'div element child of root correctly positioned' );
+    assert.ok( siblingBoundsCorrect( inputElement ), 'input element child of root correctly positioned' );
+  } );
+} );

js/scenery-tests.js

@@ -10,6 +10,7 @@ define( require => {
 
   // modules
   require( 'SCENERY/accessibility/AccessibilityTests' );
+  require( 'SCENERY/accessibility/AccessibleSiblingTests' );
   require( 'SCENERY/accessibility/AccessibilityInputTests' );
   require( 'SCENERY/accessibility/AccessibilityUtilTests' );
   require( 'SCENERY/accessibility/FocusTests' );