fix(existing-rule): aria-busy now shows an error message for a use with unallowed children (#5017)

Updated existing rule for aria-required-children for cases where the
aria-busy attribute is used. This now will show the user a specific
error message regarding aria-busy with unallowed children instead of the
one for used for other cases using unallowed children.

Replaces PR: [5011](#5011)

Closes: #4626

Author: chutchins25

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

@@ -41,8 +41,11 @@ export default function ariaRequiredChildrenEvaluate(
 
   if (unallowed.length) {
     this.relatedNodes(unallowed.map(({ vNode }) => vNode));
+    const messageKey =
+      virtualNode.attr('aria-busy') === 'true' ? 'aria-busy-fail' : 'unallowed';
+
     this.data({
-      messageKey: 'unallowed',
+      messageKey,
       values: unallowed
         .map(({ vNode, attr }) => getUnallowedSelector(vNode, attr))
         .filter((selector, index, array) => array.indexOf(selector) === index)

lib/checks/aria/aria-required-children.json

@@ -27,7 +27,8 @@
       "fail": {
         "singular": "Required ARIA child role not present: ${data.values}",
         "plural": "Required ARIA children role not present: ${data.values}",
-        "unallowed": "Element has children which are not allowed: ${data.values}"
+        "unallowed": "Element has children which are not allowed: ${data.values}",
+        "aria-busy-fail": "Element has children which are not allowed: ${data.values}; Having aria-busy=\"true\" does not allow children with roles that are not allowed"
       },
       "incomplete": {
         "singular": "Expecting ARIA child role to be added: ${data.values}",

locales/_template.json

@@ -509,7 +509,8 @@
       "fail": {
         "singular": "Required ARIA child role not present: ${data.values}",
         "plural": "Required ARIA children role not present: ${data.values}",
-        "unallowed": "Element has children which are not allowed: ${data.values}"
+        "unallowed": "Element has children which are not allowed: ${data.values}",
+        "aria-busy-fail": "Element has children which are not allowed: ${data.values}; Having aria-busy=\"true\" does not allow children with roles that are not allowed"
       },
       "incomplete": {
         "singular": "Expecting ARIA child role to be added: ${data.values}",

test/checks/aria/required-children.js

@@ -146,14 +146,14 @@ describe('aria-required-children', () => {
     });
   });
 
-  it('should fail list with an unallowed child, even if aria-busy="true"', () => {
+  it('should fail list with an unallowed child but show a custom message, even if aria-busy="true"', () => {
     const params = checkSetup(`
       <div id="target" role="list" aria-busy="true"><div role="tabpanel"></div></div>
     `);
     assert.isFalse(requiredChildrenCheck.apply(checkContext, params));
 
     assert.deepEqual(checkContext._data, {
-      messageKey: 'unallowed',
+      messageKey: 'aria-busy-fail',
       values: '[role=tabpanel]'
     });
   });