feat(closest): VirtualNode implementation of Element.closest. Deprecate commons.dom.findUp and commons.dom.findUpVirtual (#2139)

* feat(closest): VirtualNode implementation of Element.closest. Deprecate commons.dom.findUp and commons.dom.findUpVirtual

* add shadow support

Author: straker

lib/commons/dom/find-up.js

@@ -6,6 +6,7 @@
  * @method findUp
  * @memberof axe.commons.dom
  * @instance
+ * @deprecated use axe.utils.closest
  * @param {HTMLElement} element The starting HTMLElement
  * @param {String} target The selector for the HTMLElement
  * @return {HTMLElement|null} Either the matching HTMLElement or `null` if there was no match
@@ -21,6 +22,7 @@ dom.findUp = function(element, target) {
  * @method findUpVirtual
  * @memberof axe.commons.dom
  * @instance
+ * @deprecated use axe.utils.closest
  * @param {VirtualNode} element The starting virtualNode
  * @param {String} target The selector for the HTMLElement
  * @return {HTMLElement|null} Either the matching HTMLElement or `null` if there was no match

lib/core/utils/closest.js

@@ -0,0 +1,20 @@
+/**
+ * closest implementation that operates on a VirtualNode
+ *
+ * @method closest
+ * @memberof axe.utils
+ * @param {VirtualNode} vNode VirtualNode to match
+ * @param {String} selector CSS selector string
+ * @return {Boolean}
+ */
+axe.utils.closest = function closest(vNode, selector) {
+	while (vNode) {
+		if (axe.utils.matches(vNode, selector)) {
+			return vNode;
+		}
+
+		vNode = vNode.parent;
+	}
+
+	return null;
+};

test/core/utils/closest.js

@@ -0,0 +1,59 @@
+describe('utils.closest', function() {
+	var closest = axe.utils.closest;
+	var fixture = document.querySelector('#fixture');
+	var queryFixture = axe.testUtils.queryFixture;
+	var shadowSupported = axe.testUtils.shadowSupport.v1;
+
+	afterEach(function() {
+		fixture.innerHTML = '';
+	});
+
+	it('should find the current node', function() {
+		var virtualNode = queryFixture(
+			'<div id="parent"><div id="target">foo</div></div>'
+		);
+		var closestNode = closest(virtualNode, 'div');
+		assert.equal(closestNode, virtualNode);
+	});
+
+	it('should find a parent node', function() {
+		var virtualNode = queryFixture(
+			'<div id="parent"><span id="target">foo</span></div>'
+		);
+		var closestNode = closest(virtualNode, 'div');
+		var parent = fixture.querySelector('#parent');
+		assert.equal(closestNode, axe.utils.getNodeFromTree(parent));
+	});
+
+	it('should find an ancestor node', function() {
+		var virtualNode = queryFixture(
+			'<div id="parent"><span><span><span><span id="target">foo</span></span></span></div>'
+		);
+		var closestNode = closest(virtualNode, 'div');
+		var parent = fixture.querySelector('#parent');
+		assert.equal(closestNode, axe.utils.getNodeFromTree(parent));
+	});
+
+	it('should return null if no ancestor is found', function() {
+		var virtualNode = queryFixture(
+			'<div id="parent"><div id="target">foo</div></div>'
+		);
+		var closestNode = closest(virtualNode, 'h1');
+		assert.isNull(closestNode);
+	});
+
+	(shadowSupported ? it : xit)('should support shadow dom', function() {
+		fixture.innerHTML = '<div id="parent"></div>';
+
+		var root = fixture.firstChild.attachShadow({ mode: 'open' });
+		var slotted = document.createElement('span');
+		slotted.innerHTML = '<span id="target">foo</span>';
+		root.appendChild(slotted);
+		axe.utils.getFlattenedTree(fixture.firstChild);
+
+		var virtualNode = axe.utils.getNodeFromTree(slotted.firstChild);
+		var parent = fixture.querySelector('#parent');
+		var closestNode = closest(virtualNode, 'div');
+		assert.equal(closestNode, axe.utils.getNodeFromTree(parent));
+	});
+});