fix(label): Prevent label rule from crashing on input without type #678 (#730)

Author: WilcoFiers

lib/rules/label-matches.js

@@ -1,14 +1,7 @@
-// :not([type='hidden'])
-// :not([type='image'])
-// :not([type='button'])
-// :not([type='submit'])
-// :not([type='reset'])
-if (node.nodeName.toLowerCase() !== 'input') {
+if (node.nodeName.toLowerCase() !== 'input' ||
+    node.hasAttribute('type') === false) {
 	return true;
 }
-var t = node.getAttribute('type').toLowerCase();
-if (t === 'hidden' || t === 'image' || t === 'button' || t === 'submit' ||
-	t === 'reset') {
-	return false;
-}
-return true;
+
+var type = node.getAttribute('type').toLowerCase();
+return ['hidden', 'image', 'button', 'submit', 'reset'].includes(type) === false;

test/integration/rules/label-title-only/label-title-only.html

@@ -29,6 +29,6 @@
 	</label>
 
 	<input type="text" id="pass7" aria-describedby="hi" aria-label="Hi">
-	<input type="text" id="pass8" aria-describedby="hi" aria-labelledby="hi">
+	<input id="pass8" aria-describedby="hi" aria-labelledby="hi">
 
 </form>

test/integration/rules/label/label.html

@@ -28,7 +28,7 @@
 	<label for="pass11">Label</label><select id="pass11"></select>
 	<label for="pass12">Label</label><textarea id="pass12"></textarea>
 
-	<input type="text" id="pass13" title="Label">
+	<input id="pass13" title="Label">
 	<select id="pass14" title="Label"></select>
 	<textarea id="pass15" title="Label"></textarea>
 

test/rule-matches/label-matches.js

@@ -0,0 +1,60 @@
+describe('label-matches', function () {
+  'use strict';
+
+  var fixture = document.getElementById('fixture');
+  var rule;
+
+  beforeEach(function () {
+    rule = axe._audit.rules.find(function (rule) {
+      return rule.id === 'label';
+    });
+  });
+
+  it('returns true for non-input elements', function () {
+    fixture.innerHTML = '<textarea></textarea>';
+    var target = fixture.querySelector('textarea');
+
+    assert.isTrue(rule.matches(target));
+  });
+
+  it('returns true for input elements without type', function () {
+    fixture.innerHTML = '<input />';
+    var target = fixture.querySelector('input');
+
+    assert.isTrue(rule.matches(target));
+  });
+
+  it('returns false for input buttons', function () {
+    fixture.innerHTML = '<input type="button" />' +
+      '<input type="submit" />' +
+      '<input type="image" />' +
+      '<input type="reset" />';
+
+    var targets = Array.from(fixture.querySelectorAll('input'));
+    targets.forEach(function (target) {
+      assert.isFalse(rule.matches(target));
+    });
+  });
+
+  it('returns false for input elements type=hidden', function () {
+    fixture.innerHTML = '<input type="hidden" />';
+    var target = fixture.querySelector('input');
+
+    assert.isFalse(rule.matches(target));
+  });
+
+  it('returns true for other input types', function () {
+    fixture.innerHTML = '<input type="text" />' +
+      '<input type="password" />' +
+      '<input type="url" />' +
+      '<input type="range" />' +
+      '<input type="date" />' +
+      '<input type="checkbox" />' +
+      '<input type="radio" />';
+
+    var targets = Array.from(fixture.querySelectorAll('input'));
+    targets.forEach(function (target) {
+      assert.isTrue(rule.matches(target));
+    });
+  });
+});