fix: #3625240 Make the contact region label a real heading component

Rajab Natshahrequested to merge
issue/educare-3625240:3625240-contact-heading-structure into 1.0.x

Issue: #3625240

What changed

The Contact Us page marked its regional label as a bolded paragraph inside the rich-text component:

<p><strong>US &amp; Canada</strong></p><p>Phone Number: …</p>

It reads as a heading and is used as one, but carried no heading semantics, so the grouping it creates was invisible to assistive technology and to heading-based navigation (WCAG 2.2 SC 1.3.1 Info and Relationships, level A). Editoria11y reports it as textPossibleHeading.

The label is now its own heading component in the Canvas tree, sitting beside the "Contact Information" heading it belongs under, and the text component keeps only the phone number and address.

component_id: sdc.vartheme_bs5_educare.heading
inputs:
  heading_text: 'US & Canada'
  level: 4
  text_size: h5

Changed in both places, so a newly placed pattern is correct too:

  • config/canvas.pattern.contact_split.yml (the reusable Contact Split pattern)
  • content/canvas_page/0ac28534-833d-4fee-b4f8-0ea304c7b98f.yml (the Contact Us default content)

Why it could not be fixed inside the text

Writing <h4> into the rich-text value does not work, and this was verified rather than assumed. The text component stores its value in the canvas_html_block format, whose filter_html permits only:

<strong> <em> <u> <a href …> <p class="text-align-*"> <br> <ul> <ol> <li>

No heading tags. A heading written into that markup is stripped at render, leaving bare unstyled text — worse than the bold paragraph, because it loses the emphasis as well as gaining no structure. An earlier revision of this MR did exactly that and was replaced.

Hence a real component, which is also the right shape: the heading component already takes level and text_size as separate props, so the outline position and the type size are chosen independently.

Design

level: 4 follows the h3 above it. text_size: h5 keeps the VBE Stylesheet's Desktop/Heading/H5 — Sora, 18px, line-height 1.4 — which is the size the label already had, so the page does not change visually beyond the line-height.

Testing

Verified on a fresh Drupal CMS + Educare install, as an anonymous visitor:

  • renders as <h4 data-component-id="vartheme_bs5_educare:heading" class="h5">US &amp; Canada</h4>
  • computed 18px / line-height 25.2px / Sora, matching Desktop/Heading/H5
  • page outline is h1 → h2 → h3 → h4 with no skipped levels
  • Editoria11y reports no findings on the page
  • the text component now contains only <p>Phone Number: … Address: …</p>

A full anonymous sweep of all 124 reachable URLs on the site (every programme, event, news article, view and taxonomy page) reports 0 axe-core 4.13 violations on wcag2a/wcag2aa/wcag21a/wcag21aa/wcag22aa and 0 heading-level skips.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports