fix(aria-allowed-attr): no inconsistent aria-checked on HTML checkboxes

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

@@ -1,7 +1,6 @@
-import { uniqueArray, closest, isHtmlElement } from '../../core/utils';
+import { uniqueArray, isHtmlElement } from '../../core/utils';
 import { getRole, allowedAttr, validateAttr } from '../../commons/aria';
 import { isFocusable } from '../../commons/dom';
-import cache from '../../core/base/cache';
 
 /**
  * Check if each ARIA attribute on an element is allowed for its semantic role.
@@ -30,62 +29,36 @@ import cache from '../../core/base/cache';
 export default function ariaAllowedAttrEvaluate(node, options, virtualNode) {
   const invalid = [];
   const role = getRole(virtualNode);
-  const attrs = virtualNode.attrNames;
   let allowed = allowedAttr(role);
+
   // @deprecated: allowed attr options to pass more attrs.
   // configure the standards spec instead
   if (Array.isArray(options[role])) {
     allowed = uniqueArray(options[role].concat(allowed));
   }
 
-  const tableMap = cache.get('aria-allowed-attr-table', () => new WeakMap());
-
-  function validateRowAttrs() {
-    // check if the parent exists otherwise a TypeError will occur (virtual-nodes specifically)
-    if (virtualNode.parent && role === 'row') {
-      const table = closest(
-        virtualNode,
-        'table, [role="treegrid"], [role="table"], [role="grid"]'
-      );
-
-      let tableRole = tableMap.get(table);
-      if (table && !tableRole) {
-        tableRole = getRole(table);
-        tableMap.set(table, tableRole);
-      }
-      if (['table', 'grid'].includes(tableRole) && role === 'row') {
-        return true;
-      }
+  for (const attrName of virtualNode.attrNames) {
+    if (!validateAttr(attrName)) {
+      continue; // Unknown ARIA attributes are tested in aria-valid-attr
     }
-  }
-  // Allows options to be mapped to object e.g. {'aria-level' : validateRowAttrs}
-  const ariaAttr = Array.isArray(options.validTreeRowAttrs)
-    ? options.validTreeRowAttrs
-    : [];
-  const preChecks = {};
-  ariaAttr.forEach(attr => {
-    preChecks[attr] = validateRowAttrs;
-  });
-  if (allowed) {
-    for (let i = 0; i < attrs.length; i++) {
-      const attrName = attrs[i];
-      if (validateAttr(attrName) && preChecks[attrName]?.()) {
-        invalid.push(attrName + '="' + virtualNode.attr(attrName) + '"');
-      } else if (validateAttr(attrName) && !allowed.includes(attrName)) {
-        invalid.push(attrName + '="' + virtualNode.attr(attrName) + '"');
-      }
+    if (!allowed.includes(attrName)) {
+      invalid.push(attrName);
     }
   }
 
-  if (invalid.length) {
-    this.data(invalid);
+  if (!invalid.length) {
+    return true;
+  }
 
-    if (!isHtmlElement(virtualNode) && !role && !isFocusable(virtualNode)) {
-      return undefined;
-    }
+  this.data(
+    invalid.map(attrName => {
+      return attrName + '="' + virtualNode.attr(attrName) + '"';
+    })
+  );
 
-    return false;
+  if (!role && !isHtmlElement(virtualNode) && !isFocusable(virtualNode)) {
+    // TODO: Some message thing
+    return undefined;
   }
-
-  return true;
+  return false;
 }

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

@@ -0,0 +1,20 @@
+import getRole from '../../commons/aria/get-role';
+import ariaConditionalCheckboxAttr from './aria-conditional-checkbox-attr-evaluate';
+import ariaConditionalRowAttr from './aria-conditional-row-attr-evaluate';
+
+const conditionalRoleMap = {
+  row: ariaConditionalRowAttr,
+  checkbox: ariaConditionalCheckboxAttr
+};
+
+export default function ariaConditionalAttrEvaluate(
+  node,
+  options,
+  virtualNode
+) {
+  const role = getRole(virtualNode);
+  if (!conditionalRoleMap[role]) {
+    return true;
+  }
+  return conditionalRoleMap[role].call(this, node, options, virtualNode);
+}

lib/checks/aria/aria-conditional-attr.json

@@ -0,0 +1,24 @@
+{
+  "id": "aria-conditional-attr",
+  "evaluate": "aria-conditional-attr-evaluate",
+  "options": {
+    "invalidTableRowAttrs": [
+      "aria-posinset",
+      "aria-setsize",
+      "aria-expanded",
+      "aria-level"
+    ]
+  },
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "ARIA attribute is allowed",
+      "fail": {
+        "checkbox": "The aria-checked attribute must be removed, or be consistent with the native checked state",
+        "checkboxMixed": "aria-checked=\"mixed\" cannot be used on an native HTML checkbox",
+        "rowSingular": "This row attribute is supported with treegrid, but not ${data.ownerRole}: ${data.invalidAttrs}",
+        "rowPlural": "These row attributes are supported with treegrid, but not ${data.ownerRole}: ${data.invalidAttrs}"
+      }
+    }
+  }
+}

lib/checks/aria/aria-conditional-checkbox-attr-evaluate.js

@@ -0,0 +1,30 @@
+export default function ariaConditionalCheckboxAttr(
+  node,
+  options,
+  virtualNode
+) {
+  const { nodeName, type } = virtualNode.props;
+  const ariaChecked = virtualNode.attr('aria-checked')?.toLowerCase();
+  if (nodeName !== 'input' || type !== 'checkbox' || ariaChecked === null) {
+    return true;
+  }
+
+  // Mixed is never allowed on native checkboxes:
+  if (ariaChecked === 'mixed') {
+    this.data({ messageKey: 'checkboxMixed' });
+    return false;
+  }
+
+  // aria-checked has to be consistent with native checked:
+  if (xor(ariaChecked === 'true', isChecked(virtualNode))) {
+    this.data({ messageKey: 'checkbox' });
+    return false;
+  }
+
+  return true;
+}
+
+const xor = (a, b) => (a || b) && !(a && b);
+
+const isChecked = vNode =>
+  vNode.actualNode ? !!vNode.actualNode.checked : vNode.hasAttr('checked');

lib/checks/aria/aria-conditional-row-attr-evaluate.js

@@ -0,0 +1,36 @@
+import getRole from '../../commons/aria/get-role';
+import { closest } from '../../core/utils';
+
+export default function ariaConditionalRowAttr(
+  node,
+  { invalidTableRowAttrs } = {},
+  virtualNode
+) {
+  const invalidAttrs =
+    invalidTableRowAttrs?.filter?.(invalidAttr => {
+      return virtualNode.hasAttr(invalidAttr);
+    }) ?? [];
+  if (invalidAttrs.length === 0) {
+    return true;
+  }
+
+  const owner = getRowOwner(virtualNode);
+  const ownerRole = owner && getRole(owner);
+  if (!ownerRole || ownerRole === 'treegrid') {
+    return true;
+  }
+
+  const messageKey = `row${invalidAttrs.length > 1 ? 'Plural' : 'Singular'}`;
+  this.data({ messageKey, invalidAttrs, ownerRole });
+  return false;
+}
+
+function getRowOwner(virtualNode) {
+  // check if the parent exists otherwise a TypeError will occur (virtual-nodes specifically)
+  if (!virtualNode.parent) {
+    return true;
+  }
+  const rowOwnerQuery =
+    'table:not([role]), [role~="treegrid"], [role~="table"], [role~="grid"]';
+  return closest(virtualNode, rowOwnerQuery);
+}

lib/rules/aria-allowed-attr.json

@@ -7,7 +7,7 @@
     "description": "Ensures ARIA attributes are allowed for an element's role",
     "help": "Elements must only use allowed ARIA attributes"
   },
-  "all": [],
-  "any": ["aria-allowed-attr"],
+  "all": ["aria-allowed-attr", "aria-conditional-attr"],
+  "any": [],
   "none": ["aria-unsupported-attr", "aria-prohibited-attr"]
 }

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

@@ -137,124 +137,6 @@ describe('aria-allowed-attr', function () {
     assert.isNotNull(checkContext._data);
   });
 
-  describe('invalid aria-attributes when used on role=row as a descendant of a table or a grid', function () {
-    [
-      'aria-posinset="1"',
-      'aria-setsize="1"',
-      'aria-expanded="true"',
-      'aria-level="1"'
-    ].forEach(function (attrName) {
-      it(
-        'should return false when ' +
-          attrName +
-          ' is used on role=row thats parent is a table',
-        function () {
-          var vNode = queryFixture(
-            ' <div role="table">' +
-              '<div  id="target" role="row" ' +
-              attrName +
-              '></div>' +
-              '</div>'
-          );
-          assert.isFalse(
-            axe.testUtils
-              .getCheckEvaluate('aria-allowed-attr')
-              .call(checkContext, null, null, vNode)
-          );
-          assert.isNotNull(checkContext._data);
-        }
-      );
-    });
-
-    [
-      'aria-posinset="1"',
-      'aria-setsize="1"',
-      'aria-expanded="true"',
-      'aria-level="1"'
-    ].forEach(function (attrName) {
-      it(
-        'should return false when ' +
-          attrName +
-          ' is used on role=row thats parent is a grid',
-        function () {
-          var vNode = queryFixture(
-            ' <div role="grid">' +
-              '<div  id="target" role="row" ' +
-              attrName +
-              '></div>' +
-              '</div>'
-          );
-          assert.isFalse(
-            axe.testUtils
-              .getCheckEvaluate('aria-allowed-attr')
-              .call(checkContext, null, null, vNode)
-          );
-          assert.isNotNull(checkContext._data);
-        }
-      );
-    });
-  });
-
-  describe('options.invalidRowAttrs on role=row when a descendant of a table or a grid', function () {
-    it('should return false when provided a single aria-attribute is provided for a table', function () {
-      axe.configure({
-        checks: [
-          {
-            id: 'aria-allowed-attr',
-            options: {
-              validTreeRowAttrs: ['aria-posinset']
-            }
-          }
-        ]
-      });
-
-      var options = {
-        validTreeRowAttrs: ['aria-posinset']
-      };
-      var vNode = queryFixture(
-        ' <div role="table">' +
-          '<div id="target" role="row" aria-posinset="2"><div role="cell"></div></div>' +
-          '</div>'
-      );
-
-      assert.isFalse(
-        axe.testUtils
-          .getCheckEvaluate('aria-allowed-attr')
-          .call(checkContext, null, options, vNode)
-      );
-      assert.isNotNull(checkContext._data);
-    });
-
-    it('should return false when provided a single aria-attribute is provided for a grid', function () {
-      axe.configure({
-        checks: [
-          {
-            id: 'aria-allowed-attr',
-            options: {
-              validTreeRowAttrs: ['aria-level']
-            }
-          }
-        ]
-      });
-
-      var options = {
-        validTreeRowAttrs: ['aria-level']
-      };
-      var vNode = queryFixture(
-        ' <div role="grid">' +
-          '<div id="target" role="row" aria-level="2"><div role="gridcell"></div></div>' +
-          '</div>'
-      );
-
-      assert.isFalse(
-        axe.testUtils
-          .getCheckEvaluate('aria-allowed-attr')
-          .call(checkContext, null, options, vNode)
-      );
-      assert.isNotNull(checkContext._data);
-    });
-  });
-
   describe('options', function () {
     it('should allow provided attribute names for a role', function () {
       axe.configure({