aria-* attributes are not valid or misspelled

Question

I was generally testing Accessibility of a website using Lighthouse in Chrome Audits.

I stumbled upon this warning:

aria-* attributes are not valid or misspelled.

this is the failing element:

<a class="issue-title muted-link" href="#" data-bi-name="issue-expander" aria-role="button" aria-expanded="false" aria-controls="issue-26732-body issue-26732-comments issue-26732-reactions issue-26732-reactions-menu" aria-label="Toggle issue">

This is the link in case anyone is interested. Azure load balancer Feedback Section

To me it seems like the aria-* names and values are valid.

• aria-role = "button" seems to be correct.
• aria-expanded = "false" seems to be correct.
• aria-label seems to be correct
• aria-controls = "..." seems to contain a list of ids, all these ids are present in the DOM ( though i am not sure, if it the accessibility check should fail if they are not present in the DOM and added dynamically )

What can be the reason for this to fail ?

Answer 1

The correct spelling is not aria-role but role. See also the ARIA Role Attribute in HTML5.2.

aria-expanded, aria-controls and aria-label are correct.

I admit that the error message could have been clearer, e.g. by pointing out that aria-role is not valid.