Release 5.14.0 (#175)

* Phase 1: Adding New Rules

* Initial merge

* Phase1.25

* minor changes

* Minor changes

* Minor Changes

* Should change reverted

* Reverting old changes

* Making heading-order & heading-order-bp stable

* Added accuracy bucket

* "Ensure" compliance with changes

* reverting labelContentNameMismatchEvaluate changes it should be in Phase 2

* Resolving PR review comments

* reverting minor change

* validate.js

* json update

* json update

* updating _template.json

* minor fix for eslint issue

* 🤖 Automated formatting fixes

---------

Co-authored-by: Gagan Meena <gagan.m@browserstack.com>
Co-authored-by: gaganmBrowserStack <gaganmBrowserStack@users.noreply.github.com>

Author: Aaryan430

CHANGELOG.md

@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 const { execSync } = require('child_process');
 const conventionalCommitsParser = require('conventional-commits-parser');
 const chalk = require('chalk');
@@ -129,7 +131,7 @@ commitsToCherryPick.forEach(({ hash, type, scope, subject }) => {
 
   try {
     execSync(`git cherry-pick ${hash} -X theirs`);
-  } catch (e) {
+  } catch {
     console.error(
       chalk.red.bold('\nAborting cherry-pick and reseting to master')
     );

build/cherry-pick.js

@@ -22,7 +22,7 @@ module.exports = function (grunt) {
           '// This file is automatically generated using build/tasks/metadata-function-map.js\n';
 
         src.forEach(globPath => {
-          glob.sync(globPath).forEach(filePath => {
+          glob.sync(globPath, { posix: true }).forEach(filePath => {
             const relativePath = path.relative(
               path.dirname(file.dest),
               filePath

build/tasks/metadata-function-map.js

@@ -14,7 +14,7 @@ function fileExists(v, o) {
   var exists;
   try {
     exists = fs.existsSync(file);
-  } catch (e) {
+  } catch {
     return false;
   }
   return exists;
@@ -316,7 +316,9 @@ const miscTags = [
   'a11y-engine-experimental',
   'advanced',
   'ai',
-  'new'
+  'new',
+  'medium-accuracy',
+  'high-accuracy'
 ];
 
 const categories = [
@@ -361,6 +363,12 @@ const standardsTags = [
     standardRegex: /^EN-301-549$/,
     criterionRegex: /^EN-9\.[1-4]\.[1-9]\.\d{1,2}$/,
     wcagLevelRegex: /^wcag21?aa?$/
+  },
+  {
+    name: 'RGAA',
+    standardRegex: /^RGAAv4$/,
+    criterionRegex: /^RGAA-\d{1,2}\.\d{1,2}\.\d{1,2}$/,
+    wcagLevelRegex: /^wcag21?aa?$/
   }
 ];
 
@@ -411,7 +419,7 @@ function findTagIssues(tags) {
       standardTag: standardTags[0] ?? null,
       criterionTags
     };
-    if (bestPracticeTags.length !== 0) {
+    if (name !== 'RGAA' && bestPracticeTags.length !== 0) {
       issues.push(`${name} tags cannot be used along side best-practice tag`);
     }
     if (standardTags.length === 0) {
@@ -423,7 +431,7 @@ function findTagIssues(tags) {
       issues.push(`Expected at least one ${name} criterion tag, got 0`);
     }
 
-    if (wcagLevelRegex) {
+    if (wcagLevelRegex && standards.WCAG) {
       const wcagLevel = standards.WCAG.standardTag;
       if (!wcagLevel.match(wcagLevelRegex)) {
         issues.push(`${name} rules not allowed on ${wcagLevel}`);

build/tasks/validate.js

@@ -6,10 +6,10 @@
     <!-- Load local QUnit. -->
     <link
       rel="stylesheet"
-      href="../node_modules/qunitjs/qunit/qunit.css"
+      href="../node_modules/qunit/qunit/qunit.css"
       media="screen"
     />
-    <script src="../node_modules/qunitjs/qunit/qunit.js"></script>
+    <script src="../node_modules/qunit/qunit/qunit.js"></script>
     <!-- Load local lib and tests. -->
     <script src="../node_modules/axe-core/axe.min.js"></script>
     <script src="a11y.js"></script>

doc/examples/qunit/test/test.html

@@ -39,7 +39,11 @@ export default function ariaAllowedAttrEvaluate(node, options, virtualNode) {
 
   // Unknown ARIA attributes are tested in aria-valid-attr
   for (const attrName of virtualNode.attrNames) {
-    if (validateAttr(attrName) && !allowed.includes(attrName)) {
+    if (
+      validateAttr(attrName) &&
+      !allowed.includes(attrName) &&
+      !ignoredAttrs(attrName, virtualNode.attr(attrName), virtualNode)
+    ) {
       invalid.push(attrName);
     }
   }
@@ -57,3 +61,23 @@ export default function ariaAllowedAttrEvaluate(node, options, virtualNode) {
   }
   return false;
 }
+
+function ignoredAttrs(attrName, attrValue, vNode) {
+  // allow aria-required=false as screen readers consistently ignore it
+  // @see https://github.com/dequelabs/axe-core/issues/3756
+  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;
+}

doc/rule-descriptions.md

@@ -1,7 +1,7 @@
 import standards from '../../standards';
-import { idrefs } from '../../commons/dom';
+import { idrefs, isVisibleToScreenReaders } from '../../commons/dom';
 import { tokenList } from '../../core/utils';
-import { isVisibleToScreenReaders } from '../../commons/dom';
+import { getExplicitRole } from '../../commons/aria';
 /**
  * Check if `aria-errormessage` references an element that also uses a technique to announce the message (aria-live, aria-describedby, etc.).
  *
@@ -46,7 +46,7 @@ export default function ariaErrormessageEvaluate(node, options, virtualNode) {
 
     try {
       idref = attr && idrefs(virtualNode, 'aria-errormessage')[0];
-    } catch (e) {
+    } catch {
       this.data({
         messageKey: 'idrefs',
         values: tokenList(attr)
@@ -63,7 +63,7 @@ export default function ariaErrormessageEvaluate(node, options, virtualNode) {
         return false;
       }
       return (
-        idref.getAttribute('role') === 'alert' ||
+        getExplicitRole(idref) === 'alert' ||
         idref.getAttribute('aria-live') === 'assertive' ||
         idref.getAttribute('aria-live') === 'polite' ||
         tokenList(virtualNode.attr('aria-describedby')).indexOf(attr) > -1

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

@@ -11,9 +11,9 @@
         "hidden": "aria-errormessage value `${data.values}` cannot reference a hidden element"
       },
       "incomplete": {
-        "singular": "ensure aria-errormessage value `${data.values}` references an existing element",
-        "plural": "ensure aria-errormessage values `${data.values}` reference existing elements",
-        "idrefs": "unable to determine if aria-errormessage element exists on the page: ${data.values}"
+        "singular": "Ensure aria-errormessage value `${data.values}` references an existing element",
+        "plural": "Ensure aria-errormessage values `${data.values}` reference existing elements",
+        "idrefs": "Unable to determine if aria-errormessage element exists on the page: ${data.values}"
       }
     }
   }

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

@@ -1,6 +1,7 @@
-import { getRole } from '../../commons/aria';
+import { getRole, getRoleType } from '../../commons/aria';
 import { sanitize, subtreeText } from '../../commons/text';
 import standards from '../../standards';
+import memoize from '../../core/utils/memoize';
 
 /**
  * Check that an element does not use any prohibited ARIA attributes.
@@ -33,9 +34,14 @@ export default function ariaProhibitedAttrEvaluate(
 ) {
   const elementsAllowedAriaLabel = options?.elementsAllowedAriaLabel || [];
   const { nodeName } = virtualNode.props;
-  const role = getRole(virtualNode, { chromium: true });
+  const role = getRole(virtualNode, {
+    chromium: true,
+    // this check allows fallback roles. For example, `<div role="foo img" aria-label="...">` is legal.
+    fallback: true
+  });
 
   const prohibitedList = listProhibitedAttrs(
+    virtualNode,
     role,
     nodeName,
     elementsAllowedAriaLabel
@@ -51,7 +57,7 @@ export default function ariaProhibitedAttrEvaluate(
     return false;
   }
 
-  let messageKey = virtualNode.hasAttr('role') ? 'hasRole' : 'noRole';
+  let messageKey = role !== null ? 'hasRole' : 'noRole';
   messageKey += prohibited.length > 1 ? 'Plural' : 'Singular';
   this.data({ role, nodeName, messageKey, prohibited });
 
@@ -64,13 +70,32 @@ export default function ariaProhibitedAttrEvaluate(
   return true;
 }
 
-function listProhibitedAttrs(role, nodeName, elementsAllowedAriaLabel) {
+function listProhibitedAttrs(vNode, role, nodeName, elementsAllowedAriaLabel) {
   const roleSpec = standards.ariaRoles[role];
   if (roleSpec) {
     return roleSpec.prohibitedAttrs || [];
   }
-  if (!!role || elementsAllowedAriaLabel.includes(nodeName)) {
+  if (
+    !!role ||
+    elementsAllowedAriaLabel.includes(nodeName) ||
+    getClosestAncestorRoleType(vNode) === 'widget'
+  ) {
     return [];
   }
   return ['aria-label', 'aria-labelledby'];
 }
+
+const getClosestAncestorRoleType = memoize(
+  function getClosestAncestorRoleTypeMemoized(vNode) {
+    if (!vNode) {
+      return;
+    }
+
+    const role = getRole(vNode, { noPresentational: true, chromium: true });
+    if (role) {
+      return getRoleType(role);
+    }
+
+    return getClosestAncestorRoleType(vNode.parent);
+  }
+);