Skip to content

fix(a11y): inline placeholder title uses <p>, not <h4>#482

Merged
skerbis merged 1 commit into
FriendsOfREDAXO:mainfrom
danspringer:a11y-inline-title-no-heading
May 21, 2026
Merged

fix(a11y): inline placeholder title uses <p>, not <h4>#482
skerbis merged 1 commit into
FriendsOfREDAXO:mainfrom
danspringer:a11y-inline-title-no-heading

Conversation

@danspringer

Copy link
Copy Markdown
Member

Summary

The inline placeholder rendered by InlineConsent::renderPlaceholderHTML() hard-wires a <h4> for the service title (fragments/ConsentManager/inline_placeholder.php). When the placeholder is rendered inside arbitrary page content, this almost always breaks the document outline: a <section> already running on <h2> / <h3> suddenly contains a stray <h4> with no parent heading. Lighthouse and other a11y audits flag this as a heading-order issue (we noticed it dropping our score on a fully-clean page from 100 to 98).

This PR switches the tag to <p> so the placeholder no longer participates in the heading outline, while keeping .consent-inline-title plus the Bootstrap-style .h4 utility class so themes that style by either selector stay visually identical.

Change

- <h4 class="consent-inline-title">…</h4>
+ <p class="consent-inline-title h4">…</p>
  • assets/consent_inline.css targets .consent-inline-title (class only, not tag) → no CSS update needed, visual rendering unchanged.
  • The bundled box_bootstrap5.php already uses the same class="… h4 …" pattern on non-heading elements, so adding .h4 here is consistent with the addon.
  • Themes that do want a real heading can still override the fragment via theme/private/fragments/ConsentManager/inline_placeholder.php (REDAXO fragment override).

Test plan

  • Inline placeholder still renders the title text in the same visual style across the bundled box variants (default, bootstrap5, uikit3, bulma).
  • Lighthouse "Heading elements appear in a sequentially-descending order" no longer flags pages embedding the placeholder.
  • Existing CSS overrides targeting .consent-inline-title keep working (class-only selectors).

The inline placeholder for blocked third-party embeds (YouTube,
Vimeo, …) hard-wired a <h4> element for the service title. When the
placeholder is rendered inside arbitrary page content, this almost
always breaks the document outline (a <section> already running on
<h2>/<h3> suddenly contains a stray <h4> with no parent heading).
Lighthouse and other a11y audits flag this as a heading-order issue.

Switches the tag to <p> so it no longer participates in the heading
outline, but keeps the existing .consent-inline-title class plus the
Bootstrap-style .h4 utility class. Themes/styles that already target
the class or .h4 typography stay visually identical; no CSS change
needed (consent_inline.css selectors are class-based).

Themes that *do* want a real heading can still override the fragment
locally via theme/private/fragments/ConsentManager/inline_placeholder.php.
@danspringer danspringer requested a review from skerbis May 21, 2026 09:18
@skerbis skerbis merged commit f79e4d1 into FriendsOfREDAXO:main May 21, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants