Contrib.social

Module accordion output does not follow Bootstrap official markup standards

Open on Drupal.org →
Created on 22 May 2025, 2 months ago

Problem/Motivation

The current output generated by the ckeditor5_bootstrap_accordion contrib module does not follow the official Bootstrap 5 accordion markup structure.
The headings are not rendered as <h2> elements and the buttons are not actual <button> elements. Instead, the module uses incorrect tags like <div> or <a>;, which breaks accessibility and diverges from Bootstrap’s official pattern.

Steps to reproduce

  1. Use the ckeditor5_bootstrap_accordion plugin to create an accordion.
  2. Inspect the generated HTML output.
  3. Compare it to the Bootstrap 5 official accordion markup in the Bootstrap documentation.
  4. Note that the heading and button tags do not match the expected structure.

Proposed resolution

Update the module output to fully comply with the Bootstrap 5 accordion markup standards:

  • Use <h2> for accordion headings.
  • Use real <button> elements for accordion toggles.
  • Ensure all accessibility attributes and data attributes are correctly set as per Bootstrap docs.

This will improve accessibility, maintainability, and ensure consistent UI behavior.

Remaining tasks

  • Refactor the module to output correct HTML structure.
  • Test with Bootstrap 5 CSS and JS to confirm correct accordion behavior.
  • Update documentation to reflect the changes.
  • Create automated tests to check the correct markup output.

User interface changes

No visual design changes expected, but accessibility and semantic HTML will improve.

API changes

No API changes expected, only output HTML changes.

Data model changes

No data model changes expected.

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇧🇷Brazil pinesso

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @pinesso
  • Comment 2 days ago →
    🇺🇸United States timurtripp

    CKEditor doesn't play nice with buttons. Could maybe add an option to Accordion Enabler to convert the <a> to <button>. With role="button" the browser treats it as a button for accessibility purposes which is the important thing.

    If the page is simple with only a top-level body field then <h2> makes sense. In most other cases it doesn't. We were allowing our users to embed these anywhere in the layout. You can even put accordions inside other accordions (I've seen it happen at least once though I don't condone it).

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024