"Certain ARIA roles must contain particular children" is inconsistent with its guidance

[andrewhick]

Product

axe Extension

Product Version

4.9.1

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

The error "Certain ARIA roles must contain particular children" should be consistent with the issue that has been detected, which is that disallowed children have been found.

An alternative which would be closer to the actual detected issue is: "Certain ARIA roles must only contain particular children".

Ideally, the guidance for the error would also say what those children should be, for example, "A tablist ARIA role can only have tab roles as children".

Actual

In the example below, "Certain ARIA roles must contain particular children" suggests that if you add the right child element (tab), it will fix the issue, but this is not the case. There is a required child, but there is also a disallowed child (tabpanel).

The extension only reports on children which are not allowed, for example: "To solve this problem, you need to fix the following: Element has children which are not allowed: [role=tabpanel]"

There is no indication of what the particular children should be. So the error title is inconsistent with the subsequent guidance.

How to Reproduce

Example failing tablist

Code:

<div role="tablist">
  <div role="tab">tab</div>
  <div role="tabpanel">tabpanel</div>
</div>

[WilcoFiers]

@andrewhick Thank you for bringing this up. Agreed, I think we tweak the language to make this a little clearer. These messages are static, so we can't adjust them for different elements. This is what the remediation message does, which for the above example is:

Fix any of the following:
- Element has children which are not allowed: [role=tabpanel]