fix(region): Decorative images ignored by region rule

lib/checks/navigation/region-evaluate.js

@@ -94,7 +94,7 @@ function findRegionlessElms(virtualNode, options) {
 function isShallowlyHidden(virtualNode) {
   // The element itself is not visible to screen readers, but its descendants might be
   return (
-    getRole(virtualNode, { noPresentational: true }) === null &&
+    ['none', 'presentation'].includes(getRole(virtualNode)) &&
     !hasChildTextNodes(virtualNode)
   );
 }

test/checks/navigation/region.js

@@ -91,6 +91,42 @@ describe('region', function () {
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
   });
 
+  it('should return true when canvas role=none', function () {
+    const checkArgs = checkSetup(`
+      <canvas id="target" role="none" />
+      <div role="main">Content</div>
+    `);
+
+    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
+  it('should return false when object has an aria-label', function () {
+    const checkArgs = checkSetup(`
+      <object id="target" aria-label="bar"></object>
+      <div role="main">Content</div>
+    `);
+
+    assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
+  it('should return false when a non-landmark has text content but a role=none', function () {
+    const checkArgs = checkSetup(`
+      <div id="target" role="none">apples</div>
+      <div role="main">Content</div>
+    `);
+
+    assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
+  it('should return true when a non-landmark does NOT have text content and a role=none', function () {
+    const checkArgs = checkSetup(`
+      <div id="target" role="none"></div>
+      <div role="main">Content</div>
+    `);
+
+    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
   it('should return true when textless text content is outside the region', function () {
     var checkArgs = checkSetup(
       '<p id="target"></p><div role="main"><h1 id="mainheader" tabindex="0">Introduction</h1></div>'

test/integration/full/region/region-fail.html

@@ -40,6 +40,22 @@ <h1 id="mainheader" tabindex="0">This is a header.</h1>
       </section>
     </div>
 
+    <div id="img-no-alt">
+      <img src="#" />
+    </div>
+    <div id="img-focusable">
+      <img src="#" tabindex="0" alt="" />
+    </div>
+    <div id="img-aria-global">
+      <img src="#" aria-atomic="true" alt="" />
+    </div>
+    <div id="labeled-object">
+      <object aria-label="bar"></object>
+    </div>
+    <div id="none-role-div">
+      <div id="target" role="none">apples</div>
+    </div>
+
     This should be ignored
 
     <main id="mocha"></main>

test/integration/full/region/region-fail.js

@@ -15,12 +15,40 @@ describe('region fail test', function () {
   });
 
   describe('violations', function () {
-    it('should find one', function () {
-      assert.lengthOf(results.violations[0].nodes, 1);
+    it('should find all violations', function () {
+      assert.lengthOf(results.violations[0].nodes, 6);
     });
 
     it('should find wrapper', function () {
       assert.deepEqual(results.violations[0].nodes[0].target, ['#wrapper']);
     });
+
+    it('should find image without an alt tag', function () {
+      assert.deepEqual(results.violations[0].nodes[1].target, ['#img-no-alt']);
+    });
+
+    it('should find focusable image', function () {
+      assert.deepEqual(results.violations[0].nodes[2].target, [
+        '#img-focusable'
+      ]);
+    });
+
+    it('should find image with global aria attr', function () {
+      assert.deepEqual(results.violations[0].nodes[3].target, [
+        '#img-aria-global'
+      ]);
+    });
+
+    it('should find object with a label', function () {
+      assert.deepEqual(results.violations[0].nodes[4].target, [
+        '#labeled-object'
+      ]);
+    });
+
+    it('should find div with an role of none', function () {
+      assert.deepEqual(results.violations[0].nodes[5].target, [
+        '#none-role-div'
+      ]);
+    });
   });
 });

test/integration/full/region/region-pass.html

@@ -20,6 +20,16 @@
   </head>
   <body>
     <a href="#mainheader" id="skiplink">This is a skip link.</a>
+    <!-- Decorative image -->
+    <img id="target" src="#" alt="" />
+    <!-- Decorative image -->
+    <img id="target" src="#" role="presentation" />
+    <!-- SVG's may be outside of a landmark -->
+    <svg role="none" aria-label="foo"></svg>
+    <!-- Div with a role of none may be outside a landmark -->
+    <div role="none"></div>
+    <!-- Canvas with a role of none may be outside a landmark -->
+    <canvas role="none" />
     <div id="wrapper">
       <div role="main">
         <h1 id="mainheader" tabindex="0">This is a header.</h1>