feat(empty-table-header): new rule to flag empty table headers (#2811)

* Add initial version of aria-table-header-name rule * Add tests for aria-empty-table-header rule * Fix PR comments * rename rule, fix tests * Rename rule * Update test file and main rule naming * Remove extra aria-empty-header-name rule * Update PR for test
dequelabs · Feb 26, 2021 · 813ee7e · 813ee7e
1 parent 1c4b039
commit 813ee7e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 4 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -69,10 +69,11 @@
 
 ## WCAG 2.1 Level A & AA Rules
 
-| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                              | Issue Type |
-| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------- | :--------- |
-| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.1/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135      | failure    |
-| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.1/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412 | failure    |
+| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                              | Issue Type                 |
+| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------- | :------------------------- |
+| [empty-table-header](https://dequeuniversity.com/rules/axe/4.1/empty-table-header?application=RuleDescription)     | Ensures table headers have discernible text                                                   | Minor   | wcag131, cat.aria                 | failure, needs&nbsp;review |
+| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.1/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135      | failure                    |
+| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.1/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412 | failure                    |
 
 ## Best Practices Rules
 

diff --git a/lib/rules/empty-table-header.json b/lib/rules/empty-table-header.json
@@ -0,0 +1,13 @@
+{
+  "id": "empty-table-header",
+  "selector": "th, [role=\"rowheader\"], [role=\"columnheader\"]",
+  "tags": ["wcag131", "cat.aria"],
+  "reviewOnFail": true,
+  "metadata": {
+    "description": "Ensures table headers have discernible text",
+    "help": "Table header text must not be empty"
+  },
+  "all": [],
+  "any": ["has-visible-text"],
+  "none": []
+}
diff --git a/test/integration/rules/empty-table-header/empty-table-header.html b/test/integration/rules/empty-table-header/empty-table-header.html
@@ -0,0 +1,49 @@
+<html lang="en">
+  <head>
+    <title>empty-table-header test</title>
+    <meta charset="utf8" />
+    <script src="/axe.js"></script>
+  </head>
+
+  <body>
+    <table>
+      <tr>
+        <th id="pass1">Ok</th>
+      </tr>
+    </table>
+
+    <table>
+      <tr>
+        <td id="pass2" role="rowheader">rowheader with name</td>
+      </tr>
+    </table>
+
+    <table>
+      <tr>
+        <td id="pass3" role="columnheader">columnheader with name</td>
+      </tr>
+    </table>
+
+    <table>
+      <tr>
+        <th id="incomplete1"></th>
+      </tr>
+    </table>
+
+    <table>
+      <tr>
+        <td id="incomplete2" role="rowheader">
+          <div style="display: none">Not Ok</div>
+        </td>
+      </tr>
+    </table>
+
+    <table>
+      <tr>
+        <td id="incomplete3" role="columnheader">
+          <div style="display: none">Not Ok</div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/test/integration/rules/empty-table-header/empty-table-header.json b/test/integration/rules/empty-table-header/empty-table-header.json
@@ -0,0 +1,6 @@
+{
+  "description": "empty-table-header tests",
+  "rule": "empty-table-header",
+  "incomplete": [["#incomplete1"], ["#incomplete2"], ["#incomplete3"]],
+  "passes": [["#pass1"], ["#pass2"], ["#pass3"]]
+}