Replace H tags with divs (modal and preferences form)

Created on 31 July 2025, about 2 months ago

Problem/Motivation

Currently the cookie banner title is marked as H2 or H1. That generates an accessibility issue: non-sequential heading structure.

Steps to reproduce

Open the modale and preference see the heading structure

Proposed resolution

As a workaround, since the modal is loaded via JavaScript, we can simply get our small JavaScript on top, start listening for changes to

(because the markup inside it changes every time you click on "Customise cookie preferences" or close the preferences form again), and simply replace all headings with a div and add a class for the heading level it had.

User interface changes

Change h1 and h2 to divs with corresponding class

📌 Task
Status

Active

Version

1.12

Component

Code

Created by

🇫🇷France flo909 Zurich

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

Merge Requests

Comments & Activities

  • Issue created by @flo909
  • Pipeline finished with Success
    about 2 months ago
    Total: 153s
    #561826
  • leymannx Berlin

    This is a very good idea. And there's already similar issues filed to the official GitHub repo:

    [Provide configurable consentModal.titleTag and consentNotice.titleTag #425]

    But I guess, until this gets fixed upstream, we need to do it ourselves.

    To maintain backwards compatibility we ideally also offer a new option in the simple_klaro.settings to configure the consentModal.titleTag and the consentNotice.titleTag.

    But first of all we need to find a way to make it work, to get the heading markup-changing JavaScript attached at the right moment and the markup actually changed.

    Later we need to get that option in.

  • Pipeline finished with Success
    about 1 month ago
    #566220
  • leymannx Berlin

    Thank you! This patch is working already really, really nice as is. Very clean solution.

    Now, what's left is to provide options in the Simple Klaro settings to enable this behavior or not. By default it must be switched off.

    1. Update Simple Klaro settings form to provide a checkbox "Fix heading structure" with the description: "By default Klaro has the modal title as <h2> and the settings form title as <h1>. This is bad for accessibility (non-sequential heading structure) and for SEO (<h2>without parent; multiple <h1>). With this option enabled both headings are replaced with a <div> and its heading level as CSS class added (<div class="h2"> and <div class="h1">). Remember you now need to take care yourself of styling it accordingly.
    2. Get this checkbox value passed from PHP to JS drupalSettings and adjust the heading JS to react only when this checkbox is enabled
    3. Provide an update hook that sets these values to FALSE initially.
  • leymannx Berlin

    Uploading your current work as static patch, as this already does the job perfectly, just the new option is missing to have it disabled by default for people who don't want the heading tags changed.

  • leymannx Berlin

    Added the functionality to have it configurable and off by default. Let's get this tested in the wild.

  • Pipeline finished with Success
    20 days ago
    #581041
  • 🇫🇷France flo909 Zurich

    Updated patch fixing drupalSettings undefined error in MutationObserver callbacks.

    The issue was that setTimeout() wasn't passing the drupalSettings parameter
    to the replaceHeadings function when the MutationObserver triggered DOM changes.

Production build 0.71.5 2024