fix(is-visible-on-screen): ignore elements hidden by overflow:hidden

lib/checks/shared/svg-non-empty-title-evaluate.js

@@ -1,4 +1,4 @@
-import visibleVirtual from '../../commons/text/visible-virtual';
+import { subtreeText } from '../../commons/text';
 
 function svgNonEmptyTitleEvaluate(node, options, virtualNode) {
   if (!virtualNode.children) {
@@ -17,7 +17,8 @@ function svgNonEmptyTitleEvaluate(node, options, virtualNode) {
   }
 
   try {
-    if (visibleVirtual(titleNode) === '') {
+    const titleText = subtreeText(titleNode, { includeHidden: true }).trim();
+    if (titleText === '') {
       this.data({
         messageKey: 'emptyTitle'
       });

lib/commons/dom/visibility-methods.js

@@ -3,8 +3,10 @@ import {
   closest,
   getRootNode,
   querySelectorAll,
-  escapeSelector
+  escapeSelector,
+  memoize
 } from '../../core/utils';
+import rectsTouch from '../math/rects-touch';
 
 const clipRegex =
   /rect\s*\(([0-9]+)px,?\s*([0-9]+)px,?\s*([0-9]+)px,?\s*([0-9]+)px\s*\)/;
@@ -88,21 +90,58 @@ export function scrollHidden(vNode) {
 }
 
 /**
- * Determine if an element is hidden by using overflow: hidden and dimensions
+ * Determine if an element is hidden by using overflow: hidden.
  * @param {VirtualNode} vNode
  * @return {Boolean}
  */
-export function overflowHidden(vNode) {
-  const elHeight = parseInt(vNode.getComputedStylePropertyValue('height'));
-  const elWidth = parseInt(vNode.getComputedStylePropertyValue('width'));
+export function overflowHidden(vNode, { isAncestor } = {}) {
+  // an ancestor that is hidden outside an overflow
+  // does not mean that a descendant is also hidden
+  // since the descendant can reposition itself to be
+  // in view of the overflow:hidden ancestor
+  if (isAncestor) {
+    return false;
+  }
 
-  return (
-    vNode.getComputedStylePropertyValue('position') === 'absolute' &&
-    (elHeight < 2 || elWidth < 2) &&
-    vNode.getComputedStylePropertyValue('overflow') === 'hidden'
-  );
+  const rect = vNode.boundingClientRect;
+  const nodes = getOverflowHiddenAncestors(vNode);
+
+  if (!nodes.length) {
+    return false;
+  }
+
+  return nodes.some(node => {
+    const nodeRect = node.boundingClientRect;
+
+    if (nodeRect.width < 2 || nodeRect.height < 2) {
+      return true;
+    }
+
+    return !rectsTouch(rect, nodeRect);
+  });
 }
 
+/**
+ * Get all ancestor nodes (including the passed in node) that have overflow:hidden
+ */
+const getOverflowHiddenAncestors = memoize(
+  function getOverflowHiddenAncestorsMemoized(vNode) {
+    const ancestors = [];
+
+    if (!vNode) {
+      return ancestors;
+    }
+
+    const overflow = vNode.getComputedStylePropertyValue('overflow');
+
+    if (overflow === 'hidden') {
+      ancestors.push(vNode);
+    }
+
+    return ancestors.concat(getOverflowHiddenAncestors(vNode.parent));
+  }
+);
+
 /**
  * Determines if an element is hidden with a clip or clip-path technique
  * @param {VirtualNode} vNode

lib/commons/math/index.js

@@ -1,3 +1,4 @@
 export { default as getOffset } from './get-offset';
 export { default as hasVisualOverlap } from './has-visual-overlap';
+export { default as rectsTouch } from './rects-touch';
 export { default as splitRects } from './split-rects';

lib/commons/math/rects-touch.js

@@ -0,0 +1,23 @@
+/**
+ * Determine if two rectangles touch.
+ * @method rectsTouch
+ * @memberof axe.commons.math
+ * @param {Rect} rect1
+ * @param {Rect} rect2
+ * @returns {Boolean}
+ */
+export default function rectsTouch(rect1, rect2) {
+  // perform an AABB (axis-aligned bounding box) check.
+  // account for differences in how browsers handle floating
+  // point precision of bounding rects
+  // @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
+
+  /* eslint-disable no-bitwise */
+  return (
+    (rect1.left | 0) < (rect2.right | 0) &&
+    (rect1.right | 0) > (rect2.left | 0) &&
+    (rect1.top | 0) < (rect2.bottom | 0) &&
+    (rect1.bottom | 0) > (rect2.top | 0)
+  );
+  /* eslint-enable no-bitwise */
+}

test/checks/color/color-contrast.js

@@ -895,5 +895,31 @@ describe('color-contrast', function () {
       );
       assert.isTrue(contrastEvaluate.apply(checkContext, params));
     });
+
+    it('passes for element outside overflow:hidden', function () {
+      var params = checkSetup(`
+        <style>
+          .container {
+            width: 200px;
+            height: 200px;
+            overflow: hidden;
+          }
+          .foo * {
+            width: 200px;
+            height: 200px;
+          }
+          #target {
+            color: #eee;
+          }
+        </style>
+        <div class="container">
+          <div class="foo" id="foo">
+            <div id="one">hello</div>
+            <div id="target">goodbye</div>
+          </div>
+        </div>
+      `);
+      assert.isTrue(contrastEvaluate.apply(checkContext, params));
+    });
   });
 });

test/checks/shared/svg-non-empty-title.js

@@ -1,68 +1,75 @@
-describe('svg-non-empty-title tests', function() {
+describe('svg-non-empty-title tests', function () {
   'use strict';
 
   var fixture = document.getElementById('fixture');
   var checkContext = axe.testUtils.MockCheckContext();
   var checkSetup = axe.testUtils.checkSetup;
   var checkEvaluate = axe.testUtils.getCheckEvaluate('svg-non-empty-title');
 
-  afterEach(function() {
+  afterEach(function () {
     fixture.innerHTML = '';
     checkContext.reset();
   });
 
-  it('returns true if the element has a `title` child', function() {
+  it('returns true if the element has a `title` child', function () {
     var checkArgs = checkSetup(
       '<svg id="target"><title>Time II: Party</title></svg>'
     );
     assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns true if the `title` child has text nested in another element', function() {
+  it('returns true if the `title` child has text nested in another element', function () {
     var checkArgs = checkSetup(
       '<svg id="target"><title><g>Time II: Party</g></title></svg>'
     );
     assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
   });
 
-  it('returns false if the element has no `title` child', function() {
+  it('returns true if the element has a `title` child with `display:none`', function () {
+    var checkArgs = checkSetup(
+      '<svg id="target"><title style="display: none;">Time II: Party</title></svg>'
+    );
+    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
+  it('returns false if the element has no `title` child', function () {
     var checkArgs = checkSetup('<svg id="target"></svg>');
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
     assert.equal(checkContext._data.messageKey, 'noTitle');
   });
 
-  it('returns false if the `title` child is empty', function() {
+  it('returns false if the `title` child is empty', function () {
     var checkArgs = checkSetup('<svg id="target"><title></title></svg>');
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
     assert.equal(checkContext._data.messageKey, 'emptyTitle');
   });
 
-  it('returns false if the `title` is a grandchild', function() {
+  it('returns false if the `title` is a grandchild', function () {
     var checkArgs = checkSetup(
       '<svg id="target"><circle><title>Time II: Party</title></circle></svg>'
     );
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
     assert.equal(checkContext._data.messageKey, 'noTitle');
   });
 
-  it('returns false if the `title` child has only whitespace', function() {
+  it('returns false if the `title` child has only whitespace', function () {
     var checkArgs = checkSetup(
       '<svg id="target"><title> \t\r\n </title></svg>'
     );
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
     assert.equal(checkContext._data.messageKey, 'emptyTitle');
   });
 
-  it('returns false if there are multiple titles, and the first is empty', function() {
+  it('returns false if there are multiple titles, and the first is empty', function () {
     var checkArgs = checkSetup(
       '<svg id="target"><title></title><title>Time II: Party</title></svg>'
     );
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
     assert.equal(checkContext._data.messageKey, 'emptyTitle');
   });
 
-  describe('Serial Virtual Node', function() {
-    it('returns true if the element has a `title` child', function() {
+  describe('Serial Virtual Node', function () {
+    it('returns true if the element has a `title` child', function () {
       var serialNode = new axe.SerialVirtualNode({
         nodeName: 'svg'
       });
@@ -82,7 +89,7 @@ describe('svg-non-empty-title tests', function() {
       assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
     });
 
-    it('returns false if the element has no `title` child', function() {
+    it('returns false if the element has no `title` child', function () {
       var serialNode = new axe.SerialVirtualNode({
         nodeName: 'svg'
       });
@@ -93,7 +100,7 @@ describe('svg-non-empty-title tests', function() {
       assert.equal(checkContext._data.messageKey, 'noTitle');
     });
 
-    it('returns undefined if the element has empty children', function() {
+    it('returns undefined if the element has empty children', function () {
       var serialNode = new axe.SerialVirtualNode({
         nodeName: 'svg'
       });

test/commons/dom/is-visible-on-screen.js

@@ -381,9 +381,18 @@ describe('dom.isVisibleOnScreen', function () {
       assert.isFalse(isVisibleOnScreen(el.actualNode));
     }
   );
-  it('should return false if element is visually hidden using position absolute, overflow hidden, and a very small height', function () {
+
+  it('should return false for screen reader only technique', function () {
+    var vNode = queryFixture(
+      '<div id="target" style="position: absolute; width: 1px; height: 1x; margin: -1px; padding: 0; border: 0; overflow: hidden;">Visually Hidden</div>'
+    );
+
+    assert.isFalse(isVisibleOnScreen(vNode));
+  });
+
+  it('should return false for element outside "overflow:hidden"', function () {
     var vNode = queryFixture(
-      '<div id="target" style="position:absolute; height: 1px; overflow: hidden;">StickySticky</div>'
+      '<div style="overflow: hidden; height: 100px;"><div id="target" style="margin-top: 200px;">Visually Hidden</div></div>'
     );
 
     assert.isFalse(isVisibleOnScreen(vNode));