Ensure unique HTML IDs for dropdown items

[peterserfozo]

Currently, dropdown IDs in Twig templates are generated using:

{% set _id = id|default('dropdown-' ~ random(1000)) %}

in https://github.com./openeuropa/bootstrap-component-library/blob/development/src/components/bcl-dropdown/dropdown.html.twig#L38

random(1000) in Twig does not ensure unique IDs, which can lead to duplicate IDs in the rendered HTML. There are multiple ways to fix it, for example, using crypto.randomUUID() as a suffix or using a 3rd party solution, e.g. https://www.npmjs.com/package/shortid. Note that, in Drupal there is a new Twig filter available since D10 for this: https://www.drupal.org/node/3363551
Another option is increasing the the argument for the random() function or concatenate more:

{% set _id = id|default('dropdown-' ~ random(1000000)) %}

{% set _id = id|default('dropdown-' ~ random(1000) ~ '-' ~ random(1000)) %}

There are some other templates where this approach is used to generate unique IDs:

This issue was detected during an accessibility audit, here is the explanation:

• Document has multiple elements referenced with ARIA with the same id attribute: dropdown-988
• Labels and ARIA relationship attributes, like aria-controls, aria-labelledby, and aria-owns, rely on unique id values to identify specific UI components. If multiple elements on a web page have the same id value, assistive technologies are likely to only recognize the first element and ignore the rest.

[escuriola]

Hello,

Thanks for your comments and recommendations.

This will be checked and answered shortly.

[tibi2303]

I increased the number generation from 1000 to 10000.... the probability from my point of view would be to low to happen so i think the solution would be okay... Right now bcl is not linked to drupal in any way and we cant access filters from there...
The probability of selecting exactly two specific numbers from a set of 7 random numbers (example menu in header), each chosen from the range 0 to 9999, is approximately 4.2 × 10⁻⁷. This is a very small probability, reflecting the low likelihood of this event occurring.