Problem/Motivation

The radix accordion component creates duplicate HTML ids, because the id from the accordion is also used for each button inside the accordion (because the id is inherited via twig).

Steps to reproduce

  • Add a accordion component
  • Inspect the generated html looking for the accordion id and the id of the buttons inside the accordion
  • Note that the buttons have the same id than the accordion itself

Proposed resolution

Avoid creating a button id by explicitly providing an empty id to the buttons inside the accordion
Bootstrap does not use an id on the button in its examples: https://getbootstrap.com/docs/5.3/components/accordion/#example

Otherwise one could also given an unique id to the buttons, like this:

id: 'button-' ~ id ~ '-' ~ loop.index

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork radix-3573814

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

stefan.korn created an issue. See original summary.

stefan.korn’s picture

Status: Active » Needs review

doxigo made their first commit to this issue’s fork.

  • doxigo committed ff0da690 on 6.0.x authored by stefan.korn
    feat: #3573814 Accordion duplicate HTML id - accordion and button(s)
    
doxigo’s picture

Status: Needs review » Fixed

Great fix Stefan, merged

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.