[aria-*] attributes do not have valid values

[dshakya]

I ran the accessibility check using Chrome Developer tool. One of the issues reported was that -

[aria-*] attributes do not have valid values

This was for the tab element. The button has [aria-controls=“panel-12”] but the associated panel has the id of just “panel-”. The number 12 is not added to the id of it and hence the warning. Please see image below. Is it possible to add the number to the id as well?

Also, the [aria-labelledby] attribute corresponds to “tab-12” but no ID is assigned to the button for tab-12. This returns another warning in accessibility checks.

[rad]

Hi Deepak,

Thanks for reaching out.

I can confirm these issues on my installation and I added this to our issue tracker. For now, you will have to manually add the panel ID.

Thanks!

[dshakya]

Hi @Rad,

Thanks fore the reply and confirming that this is an issue. I did use the solution which will make the warning go away for the moment but there is not convenient as there are too many places to change. Also, I didn’t need to type in “panel-” as it is automatically added. Just typed in the number to add it in.

The “LabelledBy” does not work as desired as there is no ID field for the button assigned with “tab-12”. Could you please log this in issue tracker as well?

Cheers!

[thai]

@dshakya

The “LabelledBy” does not work as desired as there is no ID field for the button assigned with “tab-12”. Could you please log this in issue tracker as well?

Hi @dshakya,

I’ve also reported this.

Thank you.