[aria-*] attributes do not match their roles

[JacobDB]

I'm getting this alert in the latest version of Lighthouse:

[aria-*] attributes do not match their roles

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

Failing elements:

<div class="handorgel" id="handorgel1" aria-multiselectable="true">

I'm not very good with aria stuff, so I'm not exactly sure what the problem is, but the alert seems to indicate that it's the multiselectable attribute. Perhaps a role needs added to the container as well?

If this is something I can fix on my end, please do let me know, I just don't have much experience with aria so I'm not sure where to even find the appropriate documentation.

[DepTrai95]

@JacobDB
I had the same mistake and like you assumed it's caused by the multiselectable attribute. You just have to remove the attribute after the handorgel/accordion is initialized.
If you have problems with that you can have a look at my forked repository, I fixed that alert + added the aria-hidden attribute which seems to be recommended on the W3C WCAG.

[oncode]

@DepTrai95 Do you have a link from W3C where they add aria-hidden? Doesn't make sense to me, since it would hide the accordion from screen readers completely.