fix: handle noscript and template in dom.isVisible (#1257)

Author: jeeyyy

lib/commons/dom/is-visible.js

@@ -1,5 +1,5 @@
 /* global dom */
-/* eslint complexity: ["error", 18] */
+/* eslint complexity: ["error", 20] */
 
 /**
  * Determines if an element is hidden with the clip rect technique
@@ -56,8 +56,7 @@ dom.isVisible = function(el, screenReader, recursed) {
 
 	if (
 		style.getPropertyValue('display') === 'none' ||
-		nodeName.toUpperCase() === 'STYLE' ||
-		nodeName.toUpperCase() === 'SCRIPT' ||
+		['STYLE', 'SCRIPT', 'NOSCRIPT', 'TEMPLATE'].includes(nodeName) ||
 		(!screenReader && isClipped(style.getPropertyValue('clip'))) ||
 		(!recursed &&
 			// visibility is only accurate on the first element

test/commons/dom/is-visible.js

@@ -1,6 +1,8 @@
 describe('dom.isVisible', function() {
 	'use strict';
+
 	var fixture = document.getElementById('fixture');
+	var fixtureSetup = axe.testUtils.fixtureSetup;
 	var shadowSupported = axe.testUtils.shadowSupport.v1;
 	var fakeNode = {
 		nodeType: Node.ELEMENT_NODE,
@@ -78,6 +80,33 @@ describe('dom.isVisible', function() {
 			assert.isTrue(axe.commons.dom.isVisible(document));
 		});
 
+		it('should return false on STYLE tag', function() {
+			var fixture = fixtureSetup(
+				'<style id="target"> @import "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"; .green { background-color: green; } </style>'
+			);
+			var node = fixture.querySelector('#target');
+			var actual = axe.commons.dom.isVisible(node);
+			assert.isFalse(actual);
+		});
+
+		it('should return false on NOSCRIPT tag', function() {
+			var fixture = fixtureSetup(
+				'<noscript id="target"><p class="invisible"><img src="/piwik/piwik.php?idsite=1" alt="" /></p></noscript>'
+			);
+			var node = fixture.querySelector('#target');
+			var actual = axe.commons.dom.isVisible(node);
+			assert.isFalse(actual);
+		});
+
+		it('should return false on TEMPLATE tag', function() {
+			var fixture = fixtureSetup(
+				'<template id="target"><div>Name:</div></template>'
+			);
+			var node = fixture.querySelector('#target');
+			var actual = axe.commons.dom.isVisible(node);
+			assert.isFalse(actual);
+		});
+
 		it('should return true if positioned staticly but top/left is set', function() {
 			fixture.innerHTML =
 				'<div id="target" style="top: -9999px; left: -9999px;' +