'aria-allowed-attr' fails instead of returning "needs review" when generic elements use 'aria-label' and 'aria-labelledby'

[iamrafan]

aria-allowed-attr fails a few use cases of generic elements using aria-label , aria-labelledby and returns incomplete for a few other cases

Cases 1 to 6 in the examples below should return incomplete instead of a failure

Demo link: https://codepen.io/iamrafan/full/abJdjYw

Product: axe-core

Expectation: Return all the usages of ARIA 1.2 prohibited states and properties on generic elements as needs review

Motivation: Let the users review the issues instead of failing them

axe-core version: axe-core 4.2.0-canary.43394bc
axe version: axe-coconut 4.8.6.11818

[WilcoFiers]

@iamrafan Thank you for reporting the issue. I'm not sure how that slipped by us but I'm going to try to have a fix ready and released ASAP.

[iamrafan]

@WilcoFiers Thanks for taking this on, as a high priority

[WilcoFiers]

To be clear, there is a problem if you put aria-label on a div. screen readers are going to ignore it. That's what this update was designed to catch, but we overlooked the reach of this change for other elements.

[padmavemulapati]

Verified with the axe-core-develop branch code base with axe-core4.2.0
'aria-allowed-attr' failing when generic elements use 'aria-label' and 'aria-labelledby', on the following elements

"audio,applet, canvas, dl, embed, iframe, input, label, meter, object, svg, video" with the below test snippet:

<div id="target" aria-label="hello world"></div>
  <div id="target" role="code" aria-label="hello world"></div>
  <span aria-label="value" id="one"></span>
<strong aria-label="value" id="two"></strong>
<kbd aria-label="value" id="three"></kbd>
<abbr aria-label="value" id="four"></abbr>
<custom-elm aria-label="value" id="five"></custom-elm>
<audio aria-label="value" id="pass1" controls></audio>
<iframe aria-label="value" id="pass2" src="/test/playground.html"></iframe>
<canvas aria-label="value" id="pass3"></canvas>
<dl aria-label="value" id="pass4"></dl>
<input aria-label="value" id="pass5"/>
<label aria-label="value" id="pass6"></label>
<meter aria-label="value" id="pass7"></meter>
<object aria-label="value" id="pass8"></object>
<svg aria-label="value" id="pass9"></svg>
<video aria-label="value" id="pass10" controls></video>

Passing results:

Failing results:

[GregorioF2]

Hi i wanted to check if this fix was released yet? I am still having issues with false positive on aria allowed attributes with the last version. Or at least i think i am.

In my case is a color picker component. That generates the element source <div aria-label="Current color is rgba(0,0,0,0)" class="vc-sketch-active-color" style="background: rgba(0, 0, 0, 0);"></div>.

But the axe dev tools raises a serious issue that says Ensures ARIA attributes are allowed for an element's role. But from what i saw, aria-label should be allowed on div tags.

[straker]

This should be out in the latest version 4.3.1. aria-label is not allowed on div elements in ARIA 1.2 as they are prohibited attributes and screen readers do not announce the value.