I have noticed that the aria-label and aria-describedby attributes are being used on <div> elements that act as buttons for opening and closing the accordions. As you might be aware, according to the W3C standards, the aria-label and aria-describedby attributes are meant to be used with interactive elements or elements that have a semantic meaning, such as form elements or links, rather than generic container elements like <div>. Changing the markup to something like
<h2><button id="header-1" aria-controls="panel-1" aria-expanded="[true || false state]">Title of header</button></h2>
Also, please note that I'm using <h2> in my example, but you use <h3>. I haven't found a way to change that, but we need a solution to avoid skipping a heading level, which is also a violation of the Accessibility standards. I'm thinking of something like
{accordion title="My title" heading="h3"}
, but maybe you already have that feature and I haven't seen it.
Using aria attributes on divs is not against the W3C standards, and the even provide it as an example in many cases.
The problem with using the button element here, is that many templates will cause styling issues, as they include css styling specifically for (all) buttons.
So the small trade-off for not using a semantic element outweighs the issues otherwise given.
Aria attributes are not prohibited, but using aria-label and aria-labelledby is. You can confirm in the table here
w3c.github.io/aria/#generic
I get what you mention as a possible problem, but shouldn't the devs fix that on their templates? They could always use the :not or :has pseudo-classes to style all the buttons that are not part of regularLabs. The small trade-off that you mention means not having a 100% accessible site because of what other template developers did. Besides, you can always add reset CSS rules to your own Tabs & Accordions plugin to avoid styling issues.
Thank you for the title-tag="..." trick. I did not see that in the documentation.