fix: #3625237 Decouple the card heading levels from the visual size

Issue: #3625237

What changed

card and card-icon gain a heading_level prop (string, enum h1–h6, default h3), following the pattern already used by card-program, card-dated-vertical, accordion-block, share and hero-side-by-side. The visual h5 class is unchanged at every level.

card-pricing's level enum widens from 2/3/4 to 1–6, and the tag is derived from the level directly. The old expression heading_level == 2 ? 'h2' : (heading_level == 4 ? 'h4' : 'h3') silently collapsed every unnamed level to h3.

card-pricing's price stops being an <h4> and becomes a <p> carrying its existing display-6 class. A price is a value, not a section heading, and at level: 2 the card emitted h2 then h4, a skipped level inside one card.

hero-slider-container's empty-state placeholder stops being an <h2> and becomes a <p> carrying its existing display-5 class. It is authoring guidance and was entering the outline of any published page with an empty Slides slot.

Testing

Rendered through Drupal's SDC renderer on a fresh Drupal CMS + Educare install: card default gives h3, h2 and h6 honoured; card-icon default gives h3, h4 honoured; card-pricing levels 2, 5 and 6 each produce the correct tag (5 and 6 previously rendered h3); price renders as <p>.

Front end as an anonymous user across /, /about, /programs, /contact-us, /news, /events and /newsletter: every page 200, exactly one h1, zero heading-level skips, and axe-core 4.13.0 on tags wcag2a/wcag2aa/wcag21a/wcag21aa/wcag22aa reports 0 violations.

Defaults reproduce the previous output exactly, so there is no visual change. No CSS selects on the heading tags.

Remaining tasks

The Canvas config re-export in Educare, #3625238.

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

Loading
Loading