Accessibility Issue: Dialog role is missing an accessible name

[vladanpop-pk]

Hi Klaro Team,

First of all, thank you for creating and maintaining this excellent open-source consent management tool. It's been very helpful!

I'm writing to report a minor accessibility issue that was flagged by Google PageSpeed Insights and other automated accessibility checkers.

Describe the bug
The main Klaro modal container, which has role="dialog", is missing an accessible name. Automated tools report this as an ARIA violation because a dialog role must have a label to be understood by screen readers.

The element in question is:
<div role="dialog" aria-describedby="id-cookie-notice" aria-labelledby="id-cookie-title" id="klaro-cookie-notice" ...>

Even though the aria-labelledby attribute is present and points to id-cookie-title, automated tools still flag this as an issue. This might be a timing problem where the check is performed before the <h1> with the corresponding ID is fully rendered by the script.

To Reproduce

1. Install Klaro on a website.
2. Run an accessibility check using a tool like Google PageSpeed Insights or WAVE.
3. Observe the ARIA error pointing to the main Klaro dialog element.

Expected behavior
The dialog element should have an accessible name, and no accessibility errors related to this should be reported. A simple solution might be to add a static aria-label attribute directly to the main <div> as a fallback.

Screenshots
Here is a screenshot from the PageSpeed Insights report showing the issue:

Additional context

• Website where the issue can be seen: https://easycube3.net/
• Klaro version: v0.7.22
• This issue was also observed on your own website, klaro.org.

Thanks again for your great work. I hope this feedback is helpful in making Klaro even better.

Best regards.

[werk21]

Druplicate to #521