feat(role-text): add role-text rule (#2702)

* feat(role-text): add role-text rule * fix tests * fix
dequelabs · Jan 11, 2021 · 7c05162 · 7c05162
1 parent 0b0fec2
commit 7c05162
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 7 deletions.
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -82,6 +82,7 @@ Rules that do not necessarily conform to WCAG success criterion but are industry
 | [accesskeys](https://dequeuniversity.com/rules/axe/4.1/accesskeys?application=RuleDescription)                                                   | Ensures every accesskey attribute value is unique                                                          | Serious            | cat.keyboard, best-practice                     | failure                    |
 | [aria-allowed-role](https://dequeuniversity.com/rules/axe/4.1/aria-allowed-role?application=RuleDescription)                                     | Ensures role attribute has an appropriate value for the element                                            | Minor              | cat.aria, best-practice                         | failure, needs&nbsp;review |
 | [aria-dialog-name](https://dequeuniversity.com/rules/axe/4.1/aria-dialog-name?application=RuleDescription)                                       | Ensures every ARIA dialog and alertdialog node has an accessible name                                      | Serious            | cat.aria, best-practice                         | failure, needs&nbsp;review |
+| [aria-text](https://dequeuniversity.com/rules/axe/4.1/aria-text?application=RuleDescription)                                                     | Ensures &quot;role=text&quot; is used correctly                                                            | Serious            | cat.aria, best-practice                         | failure, needs&nbsp;review |
 | [aria-treeitem-name](https://dequeuniversity.com/rules/axe/4.1/aria-treeitem-name?application=RuleDescription)                                   | Ensures every ARIA treeitem node has an accessible name                                                    | Serious            | cat.aria, best-practice                         | failure, needs&nbsp;review |
 | [empty-heading](https://dequeuniversity.com/rules/axe/4.1/empty-heading?application=RuleDescription)                                             | Ensures headings have discernible text                                                                     | Minor              | cat.name-role-value, best-practice              | failure, needs&nbsp;review |
 | [frame-tested](https://dequeuniversity.com/rules/axe/4.1/frame-tested?application=RuleDescription)                                               | Ensures &lt;iframe&gt; and &lt;frame&gt; elements contain the axe-core script                              | Critical           | cat.structure, review-item, best-practice       | failure, needs&nbsp;review |

diff --git a/lib/rules/aria-text.json b/lib/rules/aria-text.json
@@ -0,0 +1,12 @@
+{
+  "id": "aria-text",
+  "selector": "[role=text]",
+  "tags": ["cat.aria", "best-practice"],
+  "metadata": {
+    "description": "Ensures \"role=text\" is used on elements with no focusable descendants",
+    "help": "\"role=text\" should have no focusable descendants"
+  },
+  "all": [],
+  "any": ["no-focusable-content"],
+  "none": []
+}
diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js
@@ -719,6 +719,11 @@ const ariaRoles = {
     // Note: spec difference
     nameFromContent: true
   },
+  text: {
+    type: 'structure',
+    superclassRole: ['section'],
+    nameFromContent: true
+  },
   textbox: {
     type: 'widget',
     allowedAttrs: [

diff --git a/test/commons/standards/get-aria-roles-by-type.js b/test/commons/standards/get-aria-roles-by-type.js
@@ -47,6 +47,7 @@ describe('standards.getAriaRolesByType', function() {
       'superscript',
       'table',
       'term',
+      'text',
       'time',
       'toolbar',
       'tooltip'

diff --git a/test/commons/standards/get-aria-roles-supporting-name-from-content.js b/test/commons/standards/get-aria-roles-supporting-name-from-content.js
@@ -43,6 +43,7 @@ describe('standards.getAriaRolesSupportingNameFromContent', function() {
       'tab',
       'table',
       'term',
+      'text',
       'tooltip',
       'treeitem',
       'doc-backlink',

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.html b/test/integration/rules/aria-allowed-role/aria-allowed-role.html
@@ -169,6 +169,9 @@ <h1 id="pass-h1-valid-role" role="none"></h1>
 </ul>
 <hr id="hr-presentation" role="presentation" />
 <hr id="hr-none" role="none" />
+<span role="text" id="span-text" />
+<div role="text" id="div-text" />
+<p role="text" id="p-text" />
 
 <dd id="fail-dd-no-role" role="link"></dd>
 <dt id="fail-dt-no-role" role="banner"></dt>
@@ -212,3 +215,7 @@ <h1 id="pass-h1-valid-role" role="none"></h1>
 <!-- listitems -->
 <div id="fail-dpub-6" role="doc-biblioentry">ok</div>
 <div id="fail-dpub-7" role="doc-endnote">ok</div>
+<h1 role="text" id="fail-text-1">ok</h1>
+<button role="text" id="fail-text-2">ok</button>
+<a href="#" role="text" id="fail-text-3">ok</a>
+<main role="text" id="fail-text-4">ok</main>
diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.json b/test/integration/rules/aria-allowed-role/aria-allowed-role.json
@@ -66,7 +66,10 @@
     ["#pass-dpub-6"],
     ["#pass-dpub-7"],
     ["#hr-presentation"],
-    ["#hr-none"]
+    ["#hr-none"],
+    ["#span-text"],
+    ["#div-text"],
+    ["#p-text"]
   ],
   "violations": [
     ["#fail-dd-no-role"],
@@ -88,7 +91,11 @@
     ["#fail-dpub-4"],
     ["#fail-dpub-5"],
     ["#fail-dpub-6"],
-    ["#fail-dpub-7"]
+    ["#fail-dpub-7"],
+    ["#fail-text-1"],
+    ["#fail-text-2"],
+    ["#fail-text-3"],
+    ["#fail-text-4"]
   ],
   "incomplete": [["#incomplete1"], ["#incomplete2"]]
 }
diff --git a/test/integration/rules/aria-roles/aria-roles.html b/test/integration/rules/aria-roles/aria-roles.html
@@ -107,6 +107,7 @@
   <div role="doc-tip" id="pass107">ok</div>
   <div role="doc-toc" id="pass108">ok</div>
   <div role="figure" id="pass109">ok</div>
+  <div role="text" id="pass110">ok</div>
 </div>
 <div id="violation">
   <!-- abstract roles -->
@@ -124,10 +125,9 @@
   <div role="window" id="fail12">fail</div>
   <!-- invalid roles -->
   <div role="lol" id="fail13">fail</div>
-  <div role="text" id="fail14">ok</div>
   <!-- unsupported roles -->
   <!-- fallback roles -->
-  <div role="button alert" id="fail15">fail</div>
+  <div role="button alert" id="fail14">fail</div>
 </div>
 
 <!-- inapplicable  -->

diff --git a/test/integration/rules/aria-roles/aria-roles.json b/test/integration/rules/aria-roles/aria-roles.json
@@ -15,8 +15,7 @@
     ["#fail11"],
     ["#fail12"],
     ["#fail13"],
-    ["#fail14"],
-    ["#fail15"]
+    ["#fail14"]
   ],
   "passes": [
     ["#pass1"],
@@ -126,6 +125,7 @@
     ["#pass106"],
     ["#pass107"],
     ["#pass108"],
-    ["#pass109"]
+    ["#pass109"],
+    ["#pass110"]
   ]
 }
diff --git a/test/integration/rules/aria-text/aria-text.html b/test/integration/rules/aria-text/aria-text.html
@@ -0,0 +1,22 @@
+<h1>
+  <span role="text" id="pass1"
+    >Digital accessibility, <br />
+    for everyone.
+  </span>
+</h1>
+<a href="#"
+  ><span role="text" id="pass2">Buy <strong>t-shirts</strong> now</span></a
+>
+<div role="text" id="pass3">Some text<span> and some more text</span></div>
+
+<div role="text" id="fail1">
+  Still an <a href="#">interactive link</a> because of the author error.
+</div>
+<div role="text" id="fail2">
+  <a href="#" role="none">Flattened text</a> because of the explicit role.
+</div>
+<div role="text" id="fail3">
+  <a href="#" tabindex="-1" role="none">Flattened text</a> because of the
+  explicit role.
+</div>
+<p role="text" id="fail4"><button>Hello</button></p>
diff --git a/test/integration/rules/aria-text/aria-text.json b/test/integration/rules/aria-text/aria-text.json
@@ -0,0 +1,6 @@
+{
+  "description": "aria-text tests",
+  "rule": "aria-text",
+  "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"]],
+  "passes": [["#pass1"], ["#pass2"], ["#pass3"]]
+}