diff --git a/lib/rules/scrollable-region-focusable-matches.js b/lib/rules/scrollable-region-focusable-matches.js
index 34c4b08d77..a9fff1f6fa 100644
--- a/lib/rules/scrollable-region-focusable-matches.js
+++ b/lib/rules/scrollable-region-focusable-matches.js
@@ -1,21 +1,58 @@
import hasContentVirtual from '../commons/dom/has-content-virtual';
import isComboboxPopup from '../commons/aria/is-combobox-popup';
+import sanitize from '../commons/text/sanitize';
import { querySelectorAll, getScroll } from '../core/utils';
+// magic number of allowed negligence if element goes outside scrolling area
+// set to a ~1em past the scroll area. can modify if needed
+const buffer = 13;
+
export default function scrollableRegionFocusableMatches(node, virtualNode) {
+ const boundingRect = virtualNode.boundingClientRect;
return (
// The element scrolls
- getScroll(node, 13) !== undefined &&
+ getScroll(node, buffer) !== undefined &&
// It's not a combobox popup, which commonly has keyboard focus added
isComboboxPopup(virtualNode) === false &&
// And there's something actually worth scrolling to
- isNoneEmptyElement(virtualNode)
+ hasScrollableContent(node, virtualNode, boundingRect)
);
}
-function isNoneEmptyElement(vNode) {
- return querySelectorAll(vNode, '*').some(elm =>
- // (elm, noRecursion, ignoreAria)
- hasContentVirtual(elm, true, true)
- );
+function hasScrollableContent(node, virtualNode, boundingRect) {
+ return querySelectorAll(virtualNode, '*').some(vNode => {
+ const hasContent = hasContentVirtual(vNode, true, true);
+ if (!hasContent) {
+ return false;
+ }
+
+ return getChildTextRects(vNode).some(
+ rect =>
+ // part or all of the element is outside the scroll area
+ rect.left - boundingRect.left + rect.width >
+ node.clientWidth + buffer ||
+ rect.top - boundingRect.top + rect.height > node.clientHeight + buffer
+ );
+ });
+}
+
+function getChildTextRects(vNode) {
+ const boundingRect = vNode.boundingClientRect;
+ const clientRects = [];
+
+ vNode.actualNode.childNodes.forEach(textNode => {
+ if (textNode.nodeType !== 3 || sanitize(textNode.nodeValue) === '') {
+ return;
+ }
+
+ clientRects.push(...getContentRects(textNode));
+ });
+
+ return clientRects.length ? clientRects : [boundingRect];
+}
+
+function getContentRects(node) {
+ const range = document.createRange();
+ range.selectNodeContents(node);
+ return Array.from(range.getClientRects());
}
diff --git a/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html b/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html
index 750785c2be..02f9741c63 100644
--- a/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html
+++ b/test/integration/rules/scrollable-region-focusable/scrollable-region-focusable.html
@@ -3,9 +3,12 @@
-
-
-
Content
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+ doloremque laudantium.
+
@@ -16,9 +19,20 @@
-
-
-
Content
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt
+ nisi quis elit volutpat dignissim. Vivamus quis bibendum nisl. Duis id
+ imperdiet quam. Sed cursus elit condimentum lectus viverra, quis molestie
+ erat ullamcorper. Ut ut elit nulla. Fusce fermentum aliquam augue, vitae
+ blandit diam dignissim ut. Aliquam feugiat velit tempor molestie tempor.
+ Nunc placerat et ante id imperdiet. Integer volutpat, tortor ut facilisis
+ tincidunt, sapien ex molestie metus, vel eleifend tortor sapien vitae
+ elit. Pellentesque vel tristique odio. Duis ante augue, luctus eget
+ eleifend ut, malesuada sit amet diam. Duis viverra blandit erat ac ornare.
+ Quisque ut auctor justo.
+
@@ -26,11 +40,23 @@
-
-
Content
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+ tincidunt nisi quis elit volutpat dignissim. Vivamus quis bibendum
+ nisl. Duis id imperdiet quam. Sed cursus elit condimentum lectus
+ viverra, quis molestie erat ullamcorper. Ut ut elit nulla. Fusce
+ fermentum aliquam augue, vitae blandit diam dignissim ut. Aliquam
+ feugiat velit tempor molestie tempor. Nunc placerat et ante id
+ imperdiet. Integer volutpat, tortor ut facilisis tincidunt, sapien ex
+ molestie metus, vel eleifend tortor sapien vitae elit. Pellentesque
+ vel tristique odio. Duis ante augue, luctus eget eleifend ut,
+ malesuada sit amet diam. Duis viverra blandit erat ac ornare. Quisque
+ ut auctor justo.
+
@@ -47,9 +73,12 @@
-
-
-
Content
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+ doloremque laudantium.
+
@@ -144,3 +173,7 @@
test
test
+
+
+
Contents
+
diff --git a/test/rule-matches/scrollable-region-focusable-matches.js b/test/rule-matches/scrollable-region-focusable-matches.js
index 01dfe17710..5c9e252454 100644
--- a/test/rule-matches/scrollable-region-focusable-matches.js
+++ b/test/rule-matches/scrollable-region-focusable-matches.js
@@ -1,4 +1,4 @@
-describe('scrollable-region-focusable-matches', function () {
+describe('scrollable-region-focusable-matches', () => {
'use strict';
const fixture = document.getElementById('fixture');
@@ -6,11 +6,7 @@ describe('scrollable-region-focusable-matches', function () {
const shadowSupported = axe.testUtils.shadowSupport.v1;
const rule = axe.utils.getRule('scrollable-region-focusable');
- afterEach(function () {
- fixture.innerHTML = '';
- });
-
- it('returns false when element is not scrollable', function () {
+ it('returns false when element is not scrollable', () => {
const target = queryFixture(
'This element is not scrollable'
);
@@ -18,7 +14,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false when element has no visible children', function () {
+ it('returns false when element has no visible children', () => {
const target = queryFixture(
'
' +
'
' +
@@ -30,7 +26,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false when element does not overflow', function () {
+ it('returns false when element does not overflow', () => {
const target = queryFixture(
'
' +
'
Content
' +
@@ -40,7 +36,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false when element is not scrollable (overflow=hidden)', function () {
+ it('returns false when element is not scrollable (overflow=hidden)', () => {
const target = queryFixture(
'
' +
'
' +
@@ -52,7 +48,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns true when element is scrollable (overflow=auto)', function () {
+ it('returns false when element does not have content that needs to be scrolled to', () => {
const target = queryFixture(
'
'
);
const actual = rule.matches(target.actualNode, target);
+ assert.isFalse(actual);
+ });
+
+ it('returns true when element has scrollable content (overflow=auto)', () => {
+ const target = queryFixture(
+ '
' +
+ '
' +
+ '
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
' +
+ '
' +
+ '
'
+ );
+ const actual = rule.matches(target.actualNode, target);
+ assert.isTrue(actual);
+ });
+
+ it('returns false when element has content fully inside scroll area', () => {
+ const target = queryFixture(`
+
+
+
+
+
+ `);
+ const actual = rule.matches(target.actualNode, target);
+ assert.isFalse(actual);
+ });
+
+ it('returns false when element has content fully inside scroll area + buffer', () => {
+ const target = queryFixture(`
+
+
+
+
+
+ `);
+ const actual = rule.matches(target.actualNode, target);
+ assert.isFalse(actual);
+ });
+
+ it('returns true when element has content partially outside scroll area', () => {
+ const target = queryFixture(`
+
+
+
+
+
+ `);
+ const actual = rule.matches(target.actualNode, target);
+ assert.isTrue(actual);
+ });
+
+ it('returns true when element has content fully outside scroll area', () => {
+ const target = queryFixture(`
+
+
+
+
+
+ `);
+ const actual = rule.matches(target.actualNode, target);
assert.isTrue(actual);
});
- it('returns false when element overflow is visible', function () {
+ it('returns false when element overflow is visible', () => {
const target = queryFixture(
'
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
'
);
@@ -72,15 +128,15 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns true when element overflow is scroll', function () {
+ it('returns true when element overflow is scroll', () => {
const target = queryFixture(
- '
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
'
+ '
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
'
);
const actual = rule.matches(target.actualNode, target);
assert.isTrue(actual);
});
- it('returns false when element overflow is scroll but has no content', function () {
+ it('returns false when element overflow is scroll but has no content', () => {
const target = queryFixture(
'
'
);
@@ -88,7 +144,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false when element has combobox ancestor', function () {
+ it('returns false when element has combobox ancestor', () => {
const target = queryFixture(
'
Option
'
);
@@ -96,7 +152,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false when element is owned by combobox', function () {
+ it('returns false when element is owned by combobox', () => {
const target = queryFixture(
'
Option
'
);
@@ -104,7 +160,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false when element is controlled by combobox', function () {
+ it('returns false when element is controlled by combobox', () => {
const target = queryFixture(
'
Option
'
);
@@ -112,7 +168,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false for combobox with tree', function () {
+ it('returns false for combobox with tree', () => {
const target = queryFixture(
'
Option
'
);
@@ -120,7 +176,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false for combobox with grid', function () {
+ it('returns false for combobox with grid', () => {
const target = queryFixture(
'
Option
'
);
@@ -128,7 +184,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns false for combobox with dialog', function () {
+ it('returns false for combobox with dialog', () => {
const target = queryFixture(
'
Option
'
);
@@ -136,26 +192,26 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns true for combobox with non-valid role', function () {
+ it('returns true for combobox with non-valid role', () => {
const target = queryFixture(
- '
Option
'
+ '
Option
Option
Option
'
);
const actual = rule.matches(target.actualNode, target);
assert.isTrue(actual);
});
- describe('shadowDOM - scrollable-region-focusable-matches', function () {
- before(function () {
+ describe('shadowDOM - scrollable-region-focusable-matches', () => {
+ before(() => {
if (!shadowSupported) {
this.skip();
}
});
- afterEach(function () {
+ afterEach(() => {
axe._tree = undefined;
});
- it('returns false when shadowDOM element does not overflow', function () {
+ it('returns false when shadowDOM element does not overflow', () => {
fixture.innerHTML = '';
const root = fixture.firstChild.attachShadow({ mode: 'open' });
@@ -169,7 +225,7 @@ describe('scrollable-region-focusable-matches', function () {
assert.isFalse(actual);
});
- it('returns true when shadowDOM element has overflow', function () {
+ it('returns true when shadowDOM element has overflow', () => {
fixture.innerHTML = '';
const root = fixture.firstChild.attachShadow({ mode: 'open' });
+