fix(required-children): consider overriding descendant role(s) when validating required child role(s)

[jeeyyy]

Closes issue:

• Update rule aria-required-children #2076

Reviewer checks

Required fields, to be filled out by PR reviewer(s)

• Follows the commit message policy, appropriate for next version
• Code is reviewed for security

[straker]

Do we need to fail on this test case?

<div role="list" aria-owns="list"></div>

<div id="list">
  <div role="tabpanel">
    <div role="listitem"></div>
  </div>
</div>

[straker]

Both of the suggestions are optional, you can make the changes if you so feel.

[straker]

What exactly is this reduce doing? It looks like it's just pushing the children onto an array with the parent element. If that's the case it would be cleaner to just use concat.

const items = (isOwns ? [el] : []).concat(Array.from(el.children));

[straker]

Instead of upping the eslint max-params limit you could pass all these as a single object and destructure it.

missingRequiredChildren({
  node,
  childRoles,
  all,
  role,
  ownedElements,
  descendantRole
});

function missingRequiredChildren({ 
  node,
  childRoles,
  all,
  role,
  ownedElements,
  descendantRole
}) {
  // ...
}

[JustSlone]

@jeeyyy hey, question on this change. I'm not 100% sure, but this change seems to result in axe-core to flagging issues where role="group" is used to group menuitems. Was this intentional?

Example that seems like it should be OK, but fails (Example pulled from: The MDN Example #2 on using group role)

<div role="menu">
  <ul role="group">
    <li role="menuitem">Inbox</li>
    <li role="menuitem">Archive</li>
    <li role="menuitem">Trash</li>
  </ul>
  <ul role="group">
    <li role="menuitem">Custom Folder 1</li>
    <li role="menuitem">Custom Folder 2</li>
    <li role="menuitem">Custom Folder 3</li>
  </ul>
  <ul role="group">
    <li role="menuitem">New Folder</li>
  </ul>
</div>

Repro gist for convenience