fix(aria-level): New check for aria-level > 6 as needs review (#3061)

* new aria-level check works

* add test

* fix integration tests

* fix tests

doc/rule-descriptions.md

@@ -27,7 +27,7 @@
 | [aria-roles](https://dequeuniversity.com/rules/axe/4.2/aria-roles?application=RuleDescription)                                   | Ensures all elements with a role attribute use a valid value                                                  | Serious, Critical | cat.aria, wcag2a, wcag412                                                                  | failure, needs review |                                                                                                        |
 | [aria-toggle-field-name](https://dequeuniversity.com/rules/axe/4.2/aria-toggle-field-name?application=RuleDescription)           | Ensures every ARIA toggle field has an accessible name                                                        | Moderate, Serious | cat.aria, wcag2a, wcag412, ACT                                                             | failure, needs review |                                                                                                        |
 | [aria-tooltip-name](https://dequeuniversity.com/rules/axe/4.2/aria-tooltip-name?application=RuleDescription)                     | Ensures every ARIA tooltip node has an accessible name                                                        | Serious           | cat.aria, wcag2a, wcag412                                                                  | failure, needs review |                                                                                                        |
-| [aria-valid-attr-value](https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr-value?application=RuleDescription)             | Ensures all ARIA attributes have valid values                                                                 | Critical          | cat.aria, wcag2a, wcag412                                                                  | failure, needs review | [5c01ea](https://act-rules.github.io/rules/5c01ea), [c487ae](https://act-rules.github.io/rules/c487ae) |
+| [aria-valid-attr-value](https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr-value?application=RuleDescription)             | Ensures all ARIA attributes have valid values                                                                 | Serious, Critical | cat.aria, wcag2a, wcag412                                                                  | failure, needs review | [5c01ea](https://act-rules.github.io/rules/5c01ea), [c487ae](https://act-rules.github.io/rules/c487ae) |
 | [aria-valid-attr](https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr?application=RuleDescription)                         | Ensures attributes that begin with aria- are valid ARIA attributes                                            | Critical          | cat.aria, wcag2a, wcag412                                                                  | failure                    |                                                                                                        |
 | [audio-caption](https://dequeuniversity.com/rules/axe/4.2/audio-caption?application=RuleDescription)                             | Ensures <audio> elements have captions                                                                  | Critical          | cat.time-and-media, wcag2a, wcag121, section508, section508.22.a                           | needs review          | [c3232f](https://act-rules.github.io/rules/c3232f), [e7aa44](https://act-rules.github.io/rules/e7aa44) |
 | [blink](https://dequeuniversity.com/rules/axe/4.2/blink?application=RuleDescription)                                             | Ensures <blink> elements are not used                                                                   | Serious           | cat.time-and-media, wcag2a, wcag222, section508, section508.22.j                           | failure                    |                                                                                                        |

lib/checks/aria/aria-level-evaluate.js

@@ -0,0 +1,18 @@
+/**
+ * Check that an element does not have aria-level values exceeding 6
+ * VO and NVDA allow any positive value
+ * JAWS and TalkBack will give the default value if level > 6
+ * See browser/screenreader support research https://codepen.io/straker/pen/jOBjNNe
+ * @memberof checks
+ * @return {Boolean} Undefined if the element uses aria-level > 6. True otherwise.
+ */
+function ariaLevelEvaluate(node, options, virtualNode) {
+  const ariaHeadingLevel = virtualNode.attr('aria-level');
+  const ariaLevel = parseInt(ariaHeadingLevel, 10);
+  if (ariaLevel > 6) {
+    return undefined;
+  }
+  return true;
+}
+
+export default ariaLevelEvaluate;

lib/checks/aria/aria-level.json

@@ -0,0 +1,11 @@
+{
+  "id": "aria-level",
+  "evaluate": "aria-level-evaluate",
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "aria-level values are valid",
+      "incomplete": "aria-level values greater than 6 are not supported in all screenreader and browser combinations"
+    }
+  }
+}

lib/core/base/metadata-function-map.js

@@ -4,6 +4,7 @@ import ariaAllowedAttrEvaluate from '../../checks/aria/aria-allowed-attr-evaluat
 import ariaAllowedRoledEvaluate from '../../checks/aria/aria-allowed-role-evaluate';
 import ariaErrormessageEvaluate from '../../checks/aria/aria-errormessage-evaluate';
 import ariaHiddenBodyEvaluate from '../../checks/aria/aria-hidden-body-evaluate';
+import ariaLevelEvaluate from '../../checks/aria/aria-level-evaluate';
 import ariaProhibitedAttrEvaluate from '../../checks/aria/aria-prohibited-attr-evaluate';
 import ariaRequiredAttrEvaluate from '../../checks/aria/aria-required-attr-evaluate';
 import ariaRequiredChildrenEvaluate from '../../checks/aria/aria-required-children-evaluate';
@@ -180,6 +181,7 @@ const metadataFunctionMap = {
   'aria-allowed-role-evaluate': ariaAllowedRoledEvaluate,
   'aria-errormessage-evaluate': ariaErrormessageEvaluate,
   'aria-hidden-body-evaluate': ariaHiddenBodyEvaluate,
+  'aria-level-evaluate': ariaLevelEvaluate,
   'aria-prohibited-attr-evaluate': ariaProhibitedAttrEvaluate,
   'aria-required-attr-evaluate': ariaRequiredAttrEvaluate,
   'aria-required-children-evaluate': ariaRequiredChildrenEvaluate,

lib/rules/aria-valid-attr-value.json

@@ -7,7 +7,7 @@
     "description": "Ensures all ARIA attributes have valid values",
     "help": "ARIA attributes must conform to valid values"
   },
-  "all": ["aria-valid-attr-value", "aria-errormessage"],
+  "all": ["aria-valid-attr-value", "aria-errormessage", "aria-level"],
   "any": [],
   "none": []
 }

test/checks/aria/aria-level.js

@@ -0,0 +1,36 @@
+describe('aria-prohibited-attr', function() {
+  'use strict';
+
+  var checkContext = axe.testUtils.MockCheckContext();
+  var checkSetup = axe.testUtils.checkSetup;
+  var checkEvaluate = axe.testUtils.getCheckEvaluate('aria-level');
+
+  afterEach(function() {
+    checkContext.reset();
+  });
+
+  it('should return true if aria-level is less than 6', function() {
+    var params = checkSetup('<div id="target" aria-level="2">Contents</div>');
+    assert.isTrue(checkEvaluate.apply(checkContext, params));
+  });
+
+  it('should return true if aria-level is 6', function() {
+    var params = checkSetup('<div id="target" aria-level="6">Contents</div>');
+    assert.isTrue(checkEvaluate.apply(checkContext, params));
+  });
+
+  it('should return true if aria-level is negative', function() {
+    var params = checkSetup('<div id="target" aria-level="-2">Contents</div>');
+    assert.isTrue(checkEvaluate.apply(checkContext, params));
+  });
+
+  it('should return true if there is no aria-level', function() {
+    var params = checkSetup('<div id="target">Contents</div>');
+    assert.isTrue(checkEvaluate.apply(checkContext, params));
+  });
+
+  it('should return undefined if aria-level is greater than 6', function() {
+    var params = checkSetup('<div id="target" aria-level="8">Contents</div>');
+    assert.isUndefined(checkEvaluate.apply(checkContext, params));
+  });
+});

test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.html

@@ -131,9 +131,7 @@ <h2>Possible False Positives</h2>
   <div aria-labelledby=" ref ref2 " id="pass58">hi</div>
 
   <div aria-level="1" id="pass59">hi</div>
-  <div aria-level="22" id="pass60">hi</div>
   <div aria-level="+1" id="pass61">hi</div>
-  <div aria-level="+22" id="pass62">hi</div>
 
   <div aria-live="off" id="pass66">hi</div>
   <div aria-live="polite" id="pass67">hi</div>
@@ -284,4 +282,6 @@ <h2>Possible False Positives</h2>
   <div aria-describedby="stuff" id="incomplete1">hi</div>
   <div aria-current="stage" id="incomplete2">hi</div>
   <div aria-labelledby="stuff" id="incomplete3">hi</div>
+  <div aria-level="22" id="incomplete4">hi</div>
+  <div aria-level="+22" id="incomplete5">hi</div>
 </div>

test/integration/rules/aria-valid-attr-value/aria-valid-attr-value.json

@@ -103,9 +103,7 @@
     ["#pass57"],
     ["#pass58"],
     ["#pass59"],
-    ["#pass60"],
     ["#pass61"],
-    ["#pass62"],
     ["#pass66"],
     ["#pass67"],
     ["#pass68"],
@@ -224,5 +222,11 @@
     ["#pass185"],
     ["#pass186"]
   ],
-  "incomplete": [["#incomplete1"], ["#incomplete2"], ["#incomplete3"]]
+  "incomplete": [
+    ["#incomplete1"],
+    ["#incomplete2"],
+    ["#incomplete3"],
+    ["#incomplete4"],
+    ["#incomplete5"]
+  ]
 }