Phase1.25

Author: gaganmBrowserStack

build/tasks/metadata-function-map.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/validate.js

@@ -14,7 +14,7 @@ function fileExists(v, o) {
   var exists;
   try {
     exists = fs.existsSync(file);
-  } catch (e) {
+  } catch {
     return false;
   }
   return exists;
@@ -361,6 +361,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 +417,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 +429,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}`);

doc/examples/qunit/test/test.html

@@ -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>

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

@@ -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-prohibited-attr-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);
+  }
+);

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

@@ -54,6 +54,11 @@ export default function ariaRequiredAttrEvaluate(
   ) {
     return true;
   }
+  // Non-normative exception for things like media player seek slider.
+  // Tested to work in various screen readers.
+  if (role === 'slider' && virtualNode.attr('aria-valuetext')?.trim()) {
+    return true;
+  }
 
   const elmSpec = getElementSpec(virtualNode);
   const missingAttrs = requiredAttrs.filter(

lib/checks/aria/aria-required-parent-evaluate.js

@@ -48,8 +48,8 @@ function getMissingContext(
 }
 
 function getAriaOwners(element) {
-  var owners = [],
-    o = null;
+  const owners = [];
+  let o = null;
 
   while (element) {
     if (element.getAttribute('id')) {

lib/checks/aria/aria-valid-attr-value-evaluate.js

@@ -36,12 +36,23 @@ export default function ariaValidAttrValueEvaluate(node, options, virtualNode) {
 
   const preChecks = {
     // aria-controls should only check if element exists if the element
-    // doesn't have aria-expanded=false or aria-selected=false (tabs)
+    // doesn't have aria-expanded=false, aria-selected=false (tabs),
+    // or aria-haspopup (may load later)
     // @see https://github.com/dequelabs/axe-core/issues/1463
+    // @see https://github.com/dequelabs/axe-core/issues/4363
     'aria-controls': () => {
+      const hasPopup =
+        ['false', null].includes(virtualNode.attr('aria-haspopup')) === false;
+
+      if (hasPopup) {
+        needsReview = `aria-controls="${virtualNode.attr('aria-controls')}"`;
+        messageKey = 'controlsWithinPopup';
+      }
+
       return (
         virtualNode.attr('aria-expanded') !== 'false' &&
-        virtualNode.attr('aria-selected') !== 'false'
+        virtualNode.attr('aria-selected') !== 'false' &&
+        hasPopup === false
       );
     },
     // aria-current should mark as needs review if any value is used that is
@@ -104,7 +115,7 @@ export default function ariaValidAttrValueEvaluate(node, options, virtualNode) {
 
     try {
       validValue = validateAttrValue(virtualNode, attrName);
-    } catch (e) {
+    } catch {
       needsReview = `${attrName}="${attrValue}"`;
       messageKey = 'idrefs';
       return;

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

@@ -15,7 +15,8 @@
         "noIdShadow": "ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: ${data.needsReview}",
         "ariaCurrent": "ARIA attribute value is invalid and will be treated as \"aria-current=true\": ${data.needsReview}",
         "idrefs": "Unable to determine if ARIA attribute element ID exists on the page: ${data.needsReview}",
-        "empty": "ARIA attribute value is ignored while empty: ${data.needsReview}"
+        "empty": "ARIA attribute value is ignored while empty: ${data.needsReview}",
+        "controlsWithinPopup": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: ${data.needsReview}"
       }
     }
   }

lib/checks/aria/has-widget-role-evaluate.js

@@ -1,4 +1,4 @@
-import { getRoleType } from '../../commons/aria';
+import { getRoleType, getExplicitRole } from '../../commons/aria';
 
 /**
  * Check if an elements `role` attribute uses any widget or composite role values.
@@ -8,8 +8,8 @@ import { getRoleType } from '../../commons/aria';
  * @memberof checks
  * @return {Boolean} True if the element uses a `widget` or `composite` role. False otherwise.
  */
-function hasWidgetRoleEvaluate(node) {
-  const role = node.getAttribute('role');
+function hasWidgetRoleEvaluate(node, options, virtualNode) {
+  const role = getExplicitRole(virtualNode);
   if (role === null) {
     return false;
   }