Added test for technique H65, issue #64.

quailjs · Jan 5, 2014 · 16baa0a · 16baa0a
1 parent 426fe50
commit 16baa0a
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 0 deletions.
diff --git a/src/js/custom/inputWithoutLabelHasTitle.js b/src/js/custom/inputWithoutLabelHasTitle.js
@@ -0,0 +1,9 @@
+quail.inputWithoutLabelHasTitle = function() {
+	quail.html.find('input, select, textarea').each(function() {
+		if(!$(this).parent('label').length &&
+			!quail.html.find('label[for=' + $(this).attr('id') + ']').length &&
+			(!$(this).attr('title') || !quail.containsReadableText($(this).attr('title')))) {
+			quail.testFails('inputWithoutLabelHasTitle', $(this));
+		}
+	});
+};
diff --git a/src/resources/tests.yml b/src/resources/tests.yml
@@ -2404,6 +2404,33 @@ inputTextValueNotEmpty:
     en: "Text\" input elements require a non-whitespace default text"
   description: 
     en: "All <code>input</code> elements with a type of \"text\" should have a default text which is not empty."
+inputWithoutLabelHasTitle:
+  type: "custom"
+  callback: "inputWithoutLabelHasTitle"
+  components:
+    - "placeholder"
+  testability: 1
+  tags:
+    - "form"
+    - "content"
+  guidelines:
+    wcag:
+      1.1.1:
+        techniques:
+          - "H65"
+      1.3.1:
+        techniques:
+          - "H65"
+      3.3.2:
+        techniques:
+          - "H65"
+      4.1.2:
+        techniques:
+          - "H65"
+  title:
+    en: "Form controls without label should have a title attribute"
+  description:
+    en: "If it is not possible to have a label for a form control, then a title attribute on the element should be provided that describes the purpose of the control."
 labelDoesNotContainInput: 
   selector: "label:has(input)"
   tags: 

diff --git a/test/quail.html b/test/quail.html
@@ -381,6 +381,8 @@
             "testfiles/common/inputTextHasValue-pass.html",
             "testfiles/common/inputTextValueNotEmpty-fail.html",
             "testfiles/common/inputTextValueNotEmpty-pass.html",
+            "testfiles/common/inputWithoutLabelHasTitle-pass.html",
+            "testfiles/common/inputWithoutLabelHasTitle-fail.html",
             "testfiles/common/labelDoesNotContainInput-fail.html",
             "testfiles/common/labelDoesNotContainInput-pass.html",
             "testfiles/common/labelMustBeUnique-fail.html",

diff --git a/test/testfiles/common/inputWithoutLabelHasTitle-fail.html b/test/testfiles/common/inputWithoutLabelHasTitle-fail.html
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!doctype html>
+<html>
+
+    <head>
+        <title>inputWithoutLabelHasTitle-fail</title>
+        <link rel="stylesheet" href="../../../lib/qunit/qunit/qunit.css" media="screen">
+    </head>
+
+    <body>
+        <div id="quail-scope">
+            <form>
+                <label for="select">Select your favorite pet</label>
+                <select id="select">
+                    <option>Cat</option>
+                    <option>Dog</option>
+                    <option>Fish</option>
+                </select>
+                <input type="text"></input>
+                <button type="submit">Search</button>
+            </form>
+        </div>
+        <script id="qunit-jquery" src="../../../lib/jquery/jquery.js"></script>
+        <script id="qunit-quail" src="../../../dist/quail.jquery.js"></script>
+        <script id="qunit-composite" src="../../composite.js"></script>
+        <script id="qunit-qunit" src="../../../lib/qunit/qunit/qunit.js"></script>
+        <script id="qunit-script">
+            test('inputWithoutLabelHasTitle', function() {
+            	  quailTest.runTest( 'inputWithoutLabelHasTitle' );
+            	  equal(true, quailTest.confirmIsTag('input'), 'Input throws an error');
+            });
+        </script>
+    </body>
+
+</html>
diff --git a/test/testfiles/common/inputWithoutLabelHasTitle-pass.html b/test/testfiles/common/inputWithoutLabelHasTitle-pass.html
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!doctype html>
+<html>
+
+    <head>
+        <title>inputWithoutLabelHasTitle-pass</title>
+        <link rel="stylesheet" href="../../../lib/qunit/qunit/qunit.css" media="screen">
+    </head>
+
+    <body>
+        <div id="quail-scope">
+            <form>
+                <label for="select">Select your favorite pet</label>
+                <select id="select">
+                    <option>Cat</option>
+                    <option>Dog</option>
+                    <option>Fish</option>
+                </select>
+                <input type="text" title="Search keywords"></input>
+                <button type="submit">Search</button>
+            </form>
+        </div>
+        <script id="qunit-jquery" src="../../../lib/jquery/jquery.js"></script>
+        <script id="qunit-quail" src="../../../dist/quail.jquery.js"></script>
+        <script id="qunit-composite" src="../../composite.js"></script>
+        <script id="qunit-qunit" src="../../../lib/qunit/qunit/qunit.js"></script>
+        <script id="qunit-script">
+            test('inputWithoutLabelHasTitle', function() {
+            	  quailTest.runTest( 'inputWithoutLabelHasTitle' );
+            	  equal(true, quailTest.confirmIsEmpty(), 'No errors were found');
+            });
+        </script>
+    </body>
+
+</html>