Module accordion output does not follow Bootstrap official markup standards

Created on 22 May 2025, about 1 month 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

Production build 0.71.5 2024