Skip to content

[Feature] Unique ID function #3

@callinmullaney

Description

@callinmullaney

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

Metadata

Metadata

Assignees

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions