Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Unique ID function #3

Open
callinmullaney opened this issue Feb 28, 2023 · 0 comments
Open

[Feature] Unique ID function #3

callinmullaney opened this issue Feb 28, 2023 · 0 comments
Assignees

Comments

@callinmullaney
Copy link
Collaborator

callinmullaney commented Feb 28, 2023

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

@codechefmarc codechefmarc self-assigned this Mar 3, 2023
@codechefmarc codechefmarc transferred this issue from emulsify-ds/emulsify_twig May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: In progress
Development

No branches or pull requests

2 participants