-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Labels
Description
Describe the solution you'd like
When creating components that include a toggle it's accessibility best practice to add aria-expanded and aria-controls/aria-owns. However, the aria-controls needs to reference a unique ID on a page so assistive technology knows "if I click this button this other element over here should expand".
Something like the following would be ideal:
{% set accordion__attibutes = {
'id': uniqueid(accordion__base_class),
} %}
<div {{ add_attributes(accordion__attibutes) }}>
Which would render something like:
<div id="accordion-234213-2">
Describe alternatives you've considered
The current solution is to add this to our individual twig files:
{# Create a unique ID for each accordion item #}
{% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
{% set accordion__item__id = 'accordion__item-' ~ unique_id ~ '-' ~ loop.index %}
Came across this craftCMS approach that we might be able to use: https://craftcms.stackexchange.com/questions/29628/give-included-twig-component-unique-id
Reactions are currently unavailable