fix(region): img alt='' ignored by region rule

added isPresentationGraphic check which currently only handles alt='' and ignores them for the region rule
svg I believe is handled differently already
role='presentation' test added as well, use-case already handled

fix: #4145

lib/checks/navigation/region-evaluate.js

@@ -45,14 +45,19 @@ function getRegionlessNodes(options) {
  */
 function findRegionlessElms(virtualNode, options) {
   const node = virtualNode.actualNode;
-  // End recursion if the element is a landmark, skiplink, or hidden content
+  // End recursion if the element is...
+  // - a landmark
+  // - a skiplink
+  // - hidden content
+  // - a presentation graphic
   if (
     getRole(virtualNode) === 'button' ||
     isRegion(virtualNode, options) ||
     ['iframe', 'frame'].includes(virtualNode.props.nodeName) ||
     (dom.isSkipLink(virtualNode.actualNode) &&
       dom.getElementByReference(virtualNode.actualNode, 'href')) ||
-    !dom.isVisibleToScreenReaders(node)
+    !dom.isVisibleToScreenReaders(node) ||
+    isPresentationGraphic(virtualNode)
   ) {
     // Mark each parent node as having region descendant
     let vNode = virtualNode;
@@ -86,6 +91,10 @@ function findRegionlessElms(virtualNode, options) {
   }
 }
 
+function isPresentationGraphic(virtualNode) {
+  return virtualNode.props.nodeName === 'img' && virtualNode.attr('alt') === '';
+}
+
 // Check if the current element is a landmark
 function isRegion(virtualNode, options) {
   const node = virtualNode.actualNode;

test/checks/navigation/region.js

@@ -47,13 +47,32 @@ describe('region', function () {
   });
 
   it('should return false when img content is outside the region', function () {
-    var checkArgs = checkSetup(
-      '<img id="target" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"><div role="main"><h1 id="mainheader" tabindex="0">Introduction</h1></div>'
-    );
+    var checkArgs = checkSetup(`
+      <img id="target" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">
+			<div role="main">Content</div>
+    `);
 
     assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
   });
 
+  it('should return true when img content outside of the region is decorative, via an empty alt attr', function () {
+    var checkArgs = checkSetup(`
+      <img id="target" src="#" width="1" height="1" alt="" />
+			<div role="main">Content</div>
+    `);
+
+    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
+  it('should return true when img content outside of the region is decorative, via a presentation role', function () {
+    var checkArgs = checkSetup(`
+      <img id="target" src="#" width="1" height="1" role="presentation />
+			<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>'