feat(presentation-role-conflict): Test img elements with empty alt (#3717)

Author: WilcoFiers

doc/rule-descriptions.md

@@ -116,7 +116,7 @@ Rules that do not necessarily conform to WCAG success criterion but are industry
 | [landmark-unique](https://dequeuniversity.com/rules/axe/4.4/landmark-unique?application=RuleDescription)                                         | Landmarks should have a unique role or role/label/title (i.e. accessible name) combination                                                     | Moderate           | cat.semantics, best-practice               | failure                    |                                                    |
 | [meta-viewport-large](https://dequeuniversity.com/rules/axe/4.4/meta-viewport-large?application=RuleDescription)                                 | Ensures <meta name="viewport"> can scale a significant amount                                                                  | Minor              | cat.sensory-and-visual-cues, best-practice | failure                    |                                                    |
 | [page-has-heading-one](https://dequeuniversity.com/rules/axe/4.4/page-has-heading-one?application=RuleDescription)                               | Ensure that the page, or at least one of its frames contains a level-one heading                                                               | Moderate           | cat.semantics, best-practice               | failure                    |                                                    |
-| [presentation-role-conflict](https://dequeuniversity.com/rules/axe/4.4/presentation-role-conflict?application=RuleDescription)                   | Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger.                                     | Minor              | cat.aria, best-practice, ACT               | failure                    | [46ca7f](https://act-rules.github.io/rules/46ca7f) |
+| [presentation-role-conflict](https://dequeuniversity.com/rules/axe/4.4/presentation-role-conflict?application=RuleDescription)                   | Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them                             | Minor              | cat.aria, best-practice, ACT               | failure                    | [46ca7f](https://act-rules.github.io/rules/46ca7f) |
 | [region](https://dequeuniversity.com/rules/axe/4.4/region?application=RuleDescription)                                                           | Ensures all page content is contained by landmarks                                                                                             | Moderate           | cat.keyboard, best-practice                | failure                    |                                                    |
 | [scope-attr-valid](https://dequeuniversity.com/rules/axe/4.4/scope-attr-valid?application=RuleDescription)                                       | Ensures the scope attribute is used correctly on tables                                                                                        | Moderate, Critical | cat.tables, best-practice                  | failure                    |                                                    |
 | [skip-link](https://dequeuniversity.com/rules/axe/4.4/skip-link?application=RuleDescription)                                                     | Ensure all skip links have a focusable target                                                                                                  | Moderate           | cat.keyboard, best-practice                | failure, needs review |                                                    |

lib/rules/presentation-role-conflict.json

@@ -1,12 +1,12 @@
 {
   "id": "presentation-role-conflict",
+  "selector": "img[alt=''], [role=\"none\"], [role=\"presentation\"]",
   "matches": "has-implicit-chromium-role-matches",
-  "selector": "[role=\"none\"], [role=\"presentation\"]",
   "tags": ["cat.aria", "best-practice", "ACT"],
   "actIds": ["46ca7f"],
   "metadata": {
-    "description": "Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger.",
-    "help": "Elements of role none or presentation should be flagged"
+    "description": "Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them",
+    "help": "Ensure elements marked as presentational are consistently ignored"
   },
   "all": [],
   "any": [],

locales/_template.json

@@ -326,8 +326,8 @@
       "help": "Page should contain a level-one heading"
     },
     "presentation-role-conflict": {
-      "description": "Flags elements whose role is none or presentation and which cause the role conflict resolution to trigger.",
-      "help": "Elements of role none or presentation should be flagged"
+      "description": "Elements marked as presentational should not have global ARIA or tabindex to ensure all screen readers ignore them",
+      "help": "Ensure elements marked as presentational are consistently ignored"
     },
     "region": {
       "description": "Ensures all page content is contained by landmarks",

test/act-rules/element-marked-decorative-is-not-exposed-46ca7f.spec.js

@@ -0,0 +1,5 @@
+require('./act-runner.js')({
+  id: '46ca7f',
+  title: 'Element marked as decorative is not exposed',
+  axeRules: ['presentation-role-conflict']
+});

test/integration/rules/presentation-role-conflict/presentation-role-conflict.html

@@ -1,4 +1,14 @@
-<li id="violation1" role="presentation" aria-label="My Heading">Hello</li>
-<h1 id="violation2" role="none" aria-label="My Heading">Hello</h1>
+<h1 id="pass1" role="none">Just some big text</h1>
+<h1 id="pass2" role="presentation">Just some big text</h1>
+<img id="pass3" alt="" src="img.png" />
+
+<li id="fail1" role="presentation" aria-label="My Heading">Hello</li>
+<h1 id="fail2" role="none" aria-label="My Heading">Hello</h1>
+<img id="fail3" alt aria-label="foo" src="img.png" />
+<img id="fail4" alt="" tabindex="0" src="img.png" />
+<img id="fail5" alt="" aria-live="assertive" src="img.png" />
+
 <div id="inapplicable1" role="presentation">Test</div>
 <div id="inapplicable2" role="presentation">Test Button</div>
+<img id="inapplicable3" alg="foo" src="img.png" />
+<img id="inapplicable4" aria-label="foo" src="img.png" />

test/integration/rules/presentation-role-conflict/presentation-role-conflict.json

@@ -1,5 +1,6 @@
 {
   "rule": "presentation-role-conflict",
   "description": "presentation-role-conflict tests",
-  "violations": [["#violation1"], ["#violation2"]]
+  "passes": [["#pass1"], ["#pass2"], ["#pass3"]],
+  "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]]
 }

test/integration/virtual-rules/presentation-role-conflict.js

@@ -1,4 +1,19 @@
 describe('presentation-role-conflict virtual-rule', function () {
+  it('fails img[alt=""] with aria-label', function () {
+    var node = new axe.SerialVirtualNode({
+      nodeName: 'img',
+      attributes: {
+        alt: '',
+        'aria-label': 'foobar'
+      }
+    });
+
+    var results = axe.runVirtualRule('presentation-role-conflict', node);
+    assert.lengthOf(results.passes, 0);
+    assert.lengthOf(results.violations, 1);
+    assert.lengthOf(results.incomplete, 0);
+  });
+
   it('should fail when role is presentation and aria-label is present', function () {
     var node = new axe.SerialVirtualNode({
       nodeName: 'li',