fix: Avoid IE problems by using nodeName instead of tagName (#1219)

This is a maintenance PR, to update `node.tagName` usages to `node.nodeName`.

Did not update the usages in:
- `lib/core/utils/css-parser.js` - as this is a copy/pasted (imported) module.
- `lib/core/utils/qsa.js` - as this seems to break a lot of tests.

Closes issue:
- #942

## Reviewer checks

**Required fields, to be filled out by PR reviewer(s)**
- [x] Follows the commit message policy, appropriate for next version
- [x] Has documentation updated, a DU ticket, or requires no documentation change
- [x] Includes new tests, or was unnecessary
- [x] Code is reviewed for security by: << Marcy Sutton >>

lib/checks/aria/required-children.js

@@ -65,7 +65,7 @@ function missingRequiredChildren(node, childRoles, all, role) {
 		var textTypeInputs = ['text', 'search', 'email', 'url', 'tel'];
 		if (
 			textboxIndex >= 0 &&
-			node.tagName === 'INPUT' &&
+			node.nodeName.toUpperCase() === 'INPUT' &&
 			textTypeInputs.includes(node.type)
 		) {
 			missing.splice(textboxIndex, 1);

lib/checks/aria/valid-scrollable-semantics.js

@@ -33,8 +33,8 @@ const VALID_ROLES_FOR_SCROLLABLE_REGIONS = {
 function validScrollableTagName(node) {
 	// Some elements with nonsensical roles will pass this check, but should be
 	// flagged by other checks.
-	var tagName = node.tagName.toUpperCase();
-	return VALID_TAG_NAMES_FOR_SCROLLABLE_REGIONS[tagName] || false;
+	const nodeName = node.nodeName.toUpperCase();
+	return VALID_TAG_NAMES_FOR_SCROLLABLE_REGIONS[nodeName] || false;
 }
 
 /**

lib/checks/keyboard/landmark-is-top-level.js

@@ -7,7 +7,7 @@ this.data({
 
 while (parent) {
 	var role = parent.getAttribute('role');
-	if (!role && parent.tagName.toLowerCase() !== 'form') {
+	if (!role && parent.nodeName.toUpperCase() !== 'FORM') {
 		role = axe.commons.aria.implicitRole(parent);
 	}
 	if (role && landmarks.includes(role)) {

lib/checks/label/multiple-label.js

@@ -16,7 +16,10 @@ if (labels.length) {
 }
 
 while (parent) {
-	if (parent.tagName === 'LABEL' && labels.indexOf(parent) === -1) {
+	if (
+		parent.nodeName.toUpperCase() === 'LABEL' &&
+		labels.indexOf(parent) === -1
+	) {
 		labels.push(parent);
 	}
 	parent = parent.parentNode;

lib/checks/navigation/heading-order.js

@@ -5,7 +5,7 @@ if (ariaHeadingLevel !== null) {
 	return true;
 }
 
-var headingLevel = node.tagName.match(/H(\d)/);
+var headingLevel = node.nodeName.toUpperCase().match(/H(\d)/);
 
 if (headingLevel) {
 	this.data(parseInt(headingLevel[1], 10));

lib/checks/navigation/region.js

@@ -41,7 +41,7 @@ function isRegion(virtualNode) {
 	// Check if the node matches any of the CSS selectors of implicit landmarks
 	return implicitLandmarks.some(implicitSelector => {
 		let matches = axe.utils.matchesSelector(node, implicitSelector);
-		if (node.tagName.toLowerCase() === 'form') {
+		if (node.nodeName.toUpperCase() === 'FORM') {
 			let titleAttr = node.getAttribute('title');
 			let title =
 				titleAttr && titleAttr.trim() !== ''

lib/checks/visibility/hidden-content.js

@@ -1,6 +1,6 @@
 const whitelist = ['SCRIPT', 'HEAD', 'TITLE', 'NOSCRIPT', 'STYLE', 'TEMPLATE'];
 if (
-	!whitelist.includes(node.tagName.toUpperCase()) &&
+	!whitelist.includes(node.nodeName.toUpperCase()) &&
 	axe.commons.dom.hasContentVirtual(virtualNode)
 ) {
 	const styles = window.getComputedStyle(node);

lib/commons/dom/is-visual-content.js

@@ -26,7 +26,7 @@ dom.isVisualContent = function(element) {
 		return visualRoles.indexOf(role) !== -1;
 	}
 
-	switch (element.tagName.toUpperCase()) {
+	switch (element.nodeName.toUpperCase()) {
 		case 'IMG':
 		case 'IFRAME':
 		case 'OBJECT':