fix(region): Allow skip menu buttons (#3277)

dequelabs · Nov 18, 2021 · 6b6f2e3 · 6b6f2e3
1 parent d1cc205
commit 6b6f2e3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/lib/checks/navigation/region-evaluate.js b/lib/checks/navigation/region-evaluate.js
@@ -1,5 +1,5 @@
 import * as dom from '../../commons/dom';
-import * as aria from '../../commons/aria';
+import { getRole } from '../../commons/aria';
 import * as standards from '../../commons/standards';
 import matches from '../../commons/matches';
 import cache from '../../core/base/cache';
@@ -10,7 +10,7 @@ const implicitAriaLiveRoles = ['alert', 'log', 'status'];
 // Check if the current element is a landmark
 function isRegion(virtualNode, options) {
   const node = virtualNode.actualNode;
-  const role = aria.getRole(virtualNode);
+  const role = getRole(virtualNode);
   const ariaLive = (node.getAttribute('aria-live') || '').toLowerCase().trim();
 
   // Ignore content inside of aria-live
@@ -41,6 +41,7 @@ function findRegionlessElms(virtualNode, options) {
   const node = virtualNode.actualNode;
   // End recursion if the element is a landmark, skiplink, or hidden content
   if (
+    getRole(virtualNode) === 'button' ||
     isRegion(virtualNode, options) ||
     ['iframe', 'frame'].includes(virtualNode.props.nodeName) ||
     (dom.isSkipLink(virtualNode.actualNode) &&

diff --git a/test/aria-practices/apg.spec.js b/test/aria-practices/apg.spec.js
@@ -34,7 +34,6 @@ describe('aria-practices', function () {
   const disabledRules = {
     '*': [
       'color-contrast',
-      'region', // dequelabs/axe-core#3260
       'heading-order', // w3c/aria-practices#2119
       'list', // w3c/aria-practices#2118
       'scrollable-region-focusable', // w3c/aria-practices#2114

diff --git a/test/checks/navigation/region.js b/test/checks/navigation/region.js
@@ -313,6 +313,15 @@ describe('region', function() {
     assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
   });
 
+  it('should return true when there is a button', function() {
+    // Some pages have a skiplink menu, that opens through a button
+    // ARIA practices is an example of this.
+    var checkArgs = checkSetup(
+      '<button id="target">Skip menu</button><main><h1>Introduction</h1></main>'
+    );
+    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+  });
+
   (shadowSupport.v1 ? it : xit)('should test Shadow tree content', function() {
     var div = document.createElement('div');
     var shadow = div.attachShadow({ mode: 'open' });