use aria-level on headings in addition to role=header elements

lib/checks/navigation/heading-order-evaluate.js

@@ -4,17 +4,18 @@ import { isVisible } from '../../commons/dom';
 
 function getLevel(vNode) {
   const role = vNode.attr('role');
-  if (role && role.includes('heading')) {
-    const ariaHeadingLevel = vNode.attr('aria-level');
-    const level = parseInt(ariaHeadingLevel, 10);
-
-    // default aria-level for a heading is 2 if it is
-    // not set or set to an incorrect value
-    // @see https://www.w3.org/TR/wai-aria-1.1/#heading
-    if (isNaN(level) || level < 1 || level > 6) {
-      return 2;
-    }
+  const headingRole = role && role.includes('heading');
+  const ariaHeadingLevel = vNode.attr('aria-level');
+  const level = parseInt(ariaHeadingLevel, 10);
+
+  // default aria-level for a heading is 2 if it is
+  // not set or set to an incorrect value
+  // @see https://www.w3.org/TR/wai-aria-1.1/#heading
+  if ((headingRole && isNaN(level)) || level < 1 || level > 6) {
+    return 2;
+  }
 
+  if (level) {
     return level;
   }
 

test/checks/navigation/heading-order.js

@@ -79,6 +79,29 @@ describe('heading-order', function() {
     });
   });
 
+  it('should allow aria-level to override semantic level for hn tags and return true', function() {
+    var vNode = queryFixture(
+      '<h1 aria-level="2" id="target">Two</h1><h3 aria-level="4">Four</h3>'
+    );
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('heading-order')
+        .call(checkContext, null, {}, vNode, {})
+    );
+    assert.deepEqual(checkContext._data, {
+      headingOrder: [
+        {
+          ancestry: ['html > body > div:nth-child(1) > h1:nth-child(1)'],
+          level: 2
+        },
+        {
+          ancestry: ['html > body > div:nth-child(1) > h3:nth-child(2)'],
+          level: 4
+        }
+      ]
+    });
+  });
+
   it('should store the location of iframes', function() {
     var vNode = queryFixture(
       '<h1 id="target">One</h1><iframe></iframe><h3>Three</h3>'