Bug: Accordion Widget invalid IDs with special characters

Hello there,

we just noted a bug with CSS id namespace in the Accorion Widget.

If you entitle a panel with a string containing an Umlaut (ä, ö, ü – maybe other special characters as well) then this Umlaut gets URL-encoded into the whole HTML attributes (id, aria-controls, aria-labelledby, …).

This causes ids containing special characters that aren’t allowed for CSS selectors like IDs. So it is not possible to access those malformed selectors. It simply doesn’t work. Allowed characters for selectors are just upper and lower case letters, numbers and hyphens – nothing more.

Example:
Accordion Widget panel title is “Testö”. This generates the following HTML:

`[…]

[…]`

Then you cannot access the selector `#accordion-label-Test%c3%b6`.

Could you fix this problem so that no invalid characters will get into selectors?

Many thanks in advance,
– mscholz