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"]]
+}