fix(aria-allowed-attr): allow aria-multiline=false for element with c…

…ontenteditable (#4537)

Closes: #4463

lib/checks/aria/aria-allowed-attr-evaluate.js

@@ -42,7 +42,7 @@ export default function ariaAllowedAttrEvaluate(node, options, virtualNode) {
     if (
       validateAttr(attrName) &&
       !allowed.includes(attrName) &&
-      !ignoredAttrs(attrName, virtualNode.attr(attrName))
+      !ignoredAttrs(attrName, virtualNode.attr(attrName), virtualNode)
     ) {
       invalid.push(attrName);
     }
@@ -62,8 +62,22 @@ export default function ariaAllowedAttrEvaluate(node, options, virtualNode) {
   return false;
 }
 
-function ignoredAttrs(attrName, attrValue) {
+function ignoredAttrs(attrName, attrValue, vNode) {
   // allow aria-required=false as screen readers consistently ignore it
   // @see https://github.com/dequelabs/axe-core/issues/3756
-  return attrName === 'aria-required' && attrValue === 'false';
+  if (attrName === 'aria-required' && attrValue === 'false') {
+    return true;
+  }
+
+  // allow aria-multiline=false when contenteditable is set
+  // @see https://github.com/dequelabs/axe-core/issues/4463
+  if (
+    attrName === 'aria-multiline' &&
+    attrValue === 'false' &&
+    vNode.hasAttr('contenteditable')
+  ) {
+    return true;
+  }
+
+  return false;
 }

test/checks/aria/aria-allowed-attr.js

@@ -124,6 +124,56 @@ describe('aria-allowed-attr', () => {
     assert.deepEqual(checkContext._data, ['aria-required="true"']);
   });
 
+  it('should not report on aria-multiline=false with contenteditable', () => {
+    const vNode = queryFixture(
+      '<div id="target" role="combobox" aria-multiline="false" contenteditable></div>'
+    );
+
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.isNull(checkContext._data);
+  });
+
+  it('should return false for unallowed aria-multiline=true and contenteditable', () => {
+    const vNode = queryFixture(
+      '<div id="target" role="combobox" aria-multiline="true" contenteditable></div>'
+    );
+
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, ['aria-multiline="true"']);
+  });
+
+  it('should return false for unallowed aria-multiline=false', () => {
+    const vNode = queryFixture(
+      '<div id="target" role="combobox" aria-multiline="false"></div>'
+    );
+
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, ['aria-multiline="false"']);
+  });
+
+  it('should return false for unallowed aria-multiline=true', () => {
+    const vNode = queryFixture('<div id="target" aria-multiline="true"></div>');
+
+    assert.isFalse(
+      axe.testUtils
+        .getCheckEvaluate('aria-allowed-attr')
+        .call(checkContext, null, null, vNode)
+    );
+    assert.deepEqual(checkContext._data, ['aria-multiline="true"']);
+  });
+
   it('should return undefined for custom element that has no role and is not focusable', () => {
     const vNode = queryFixture(
       '<my-custom-element id="target" aria-expanded="true"></my-custom-element>'

test/integration/rules/aria-allowed-attr/failures.html

@@ -9,3 +9,7 @@
   aria-orientation="horizontal"
   id="fail5"
 ></audio>
+
+<div id="fail6" role="combobox" aria-multiline="false"></div>
+<div id="fail7" role="combobox" aria-multiline="true" contenteditable></div>
+<div id="fail8" role="combobox" aria-multiline="true"></div>

test/integration/rules/aria-allowed-attr/failures.json

@@ -1,5 +1,14 @@
 {
   "description": "aria-allowed-attr failing tests",
   "rule": "aria-allowed-attr",
-  "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]]
+  "violations": [
+    ["#fail1"],
+    ["#fail2"],
+    ["#fail3"],
+    ["#fail4"],
+    ["#fail5"],
+    ["#fail6"],
+    ["#fail7"],
+    ["#fail8"]
+  ]
 }

test/integration/rules/aria-allowed-attr/passes.html

@@ -2172,3 +2172,4 @@
 
 <!-- Ignored ARIA attributes -->
 <button id="pass101" aria-required="false"></button>
+<div id="pass102" role="combobox" aria-multiline="false" contenteditable></div>

test/integration/rules/aria-allowed-attr/passes.json

@@ -103,6 +103,7 @@
     ["#pass98"],
     ["#pass99"],
     ["#pass100"],
-    ["#pass101"]
+    ["#pass101"],
+    ["#pass102"]
   ]
 }