diff --git a/lib/commons/dom/is-visible.js b/lib/commons/dom/is-visible.js index 2a3ae2ffa3..8cb847719d 100644 --- a/lib/commons/dom/is-visible.js +++ b/lib/commons/dom/is-visible.js @@ -186,12 +186,15 @@ function isVisible(el, screenReader, recursed) { // hidden from visual users const elHeight = parseInt(style.getPropertyValue('height')); + const elWidth = parseInt(style.getPropertyValue('width')); // ways to hide content visually - const scrollableWithZeroHeight = getScroll(el) && elHeight === 0; + const scroll = getScroll(el); + const scrollableWithZeroHeight = scroll && elHeight === 0; + const scrollableWithZeroWidth = scroll && elWidth === 0; const posAbsoluteOverflowHiddenAndSmall = style.getPropertyValue('position') === 'absolute' && - elHeight < 2 && + (elHeight < 2 || elWidth < 2) && style.getPropertyValue('overflow') === 'hidden'; if ( @@ -199,6 +202,7 @@ function isVisible(el, screenReader, recursed) { (isClipped(style) || style.getPropertyValue('opacity') === '0' || scrollableWithZeroHeight || + scrollableWithZeroWidth || posAbsoluteOverflowHiddenAndSmall) ) { return false; diff --git a/test/commons/dom/is-visible.js b/test/commons/dom/is-visible.js index d1b390d4f8..a85276cab0 100644 --- a/test/commons/dom/is-visible.js +++ b/test/commons/dom/is-visible.js @@ -261,6 +261,14 @@ describe('dom.isVisible', function() { assert.isFalse(axe.commons.dom.isVisible(el)); }); + it('should return false for 0 width scrollable region', function() { + fixture.innerHTML = + '