add suggested isShallowlyHidden instead of presentational

dequelabs · Apr 30, 2024 · 524f0be · 524f0be
1 parent 70b6ddb
commit 524f0be
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/lib/checks/navigation/region-evaluate.js b/lib/checks/navigation/region-evaluate.js
@@ -1,4 +1,5 @@
 import * as dom from '../../commons/dom';
+import { hasChildTextNodes } from '../../commons/dom/has-content-virtual';
 import { getRole } from '../../commons/aria';
 import * as standards from '../../commons/standards';
 import matches from '../../commons/matches';
@@ -56,8 +57,7 @@ function findRegionlessElms(virtualNode, options) {
     ['iframe', 'frame'].includes(virtualNode.props.nodeName) ||
     (dom.isSkipLink(virtualNode.actualNode) &&
       dom.getElementByReference(virtualNode.actualNode, 'href')) ||
-    !dom.isVisibleToScreenReaders(node) ||
-    isPresentationGraphic(virtualNode)
+    !dom.isVisibleToScreenReaders(node)
   ) {
     // Mark each parent node as having region descendant
     let vNode = virtualNode;
@@ -78,7 +78,8 @@ function findRegionlessElms(virtualNode, options) {
     // @see https://github.com/dequelabs/axe-core/issues/2049
   } else if (
     node !== document.body &&
-    dom.hasContent(node, /* noRecursion: */ true)
+    dom.hasContent(node, /* noRecursion: */ true) &&
+    !isShallowlyHidden(virtualNode)
   ) {
     return [virtualNode];
 
@@ -91,8 +92,11 @@ function findRegionlessElms(virtualNode, options) {
   }
 }
 
-function isPresentationGraphic(virtualNode) {
-  return virtualNode.props.nodeName === 'img' && virtualNode.attr('alt') === '';
+function isShallowlyHidden(virtualNode) {
+  const role = getRole(virtualNode, { noPresentational: true });
+  const isPresentational = role === null;
+  // The element itself is not visible to screen readers, but its descendants might be
+  return isPresentational && !hasChildTextNodes(virtualNode);
 }
 
 // Check if the current element is a landmark

diff --git a/test/checks/navigation/region.js b/test/checks/navigation/region.js
@@ -46,7 +46,7 @@ describe('region', function () {
     assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
   });
 
-  it('should return false when img content is outside the region', function () {
+  it('should return false when img content is outside the region, no alt attribute at all', function () {
     var checkArgs = checkSetup(`
       <img id="target" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">
       <div role="main">Content</div>
@@ -57,22 +57,40 @@ describe('region', function () {
 
   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="" />
+      <img id="target" src="#" 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 () {
+  it('should return true when img content outside of the region is explicitly decorative, via a presentation role', function () {
     var checkArgs = checkSetup(`
-      <img id="target" src="#" width="1" height="1" role="presentation />
+      <img id="target" src="#" role="presentation" />
       <div role="main">Content</div>
     `);
 
     assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
   });
 
+  it('should return false when img content outside of the region is focusable (implicit role=img)', function () {
+    var checkArgs = checkSetup(`
+      <img id="target" src="#" tabindex="0" />
+      <div role="main">Content</div>
+    `);
+
+    assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
+  it('should return false when img content outside of the region has a global aria attribute (implicit role=img)', function () {
+    var checkArgs = checkSetup(`
+      <img id="target" src="#" aria-level="2" />
+      <div role="main">Content</div>
+    `);
+
+    assert.isFalse(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>'