Problem/Motivation

Four components pick their own heading level in the template, which welds the semantic level to the visual size. An author placing one at a different depth cannot correct the outline, and two of the four emit a broken outline on their own. WCAG 2.2 SC 1.3.1 Info and Relationships (level A) asks the heading structure to reflect the content; here it reflects the design's type scale instead.

  • organisms/card and organisms/card-icon hardcode h3, carrying a visual h5 class.
  • organisms/card-pricing has a level prop whose enum is only 2, 3 and 4, and derives the tag with
    {% set heading_tag = heading_level == 2 ? 'h2' : (heading_level == 4 ? 'h4' : 'h3') %}
    so every level it does not name silently becomes h3. A card under an h4 cannot be given an h5.
  • organisms/card-pricing also renders the price as an h4. A price is a value, not a section heading, and with level: 2 one card emits h2 then h4 - a skipped level inside itself.
  • organisms/hero-slider-container renders its empty-state placeholder as h2 "Hero Slider". That is authoring guidance, and it enters the page outline of any published page whose Slides slot is left empty.

Steps to reproduce

  1. Place a Pricing Card and set Heading level to 2. The title is h2 and the price under it is h4.
  2. Try to set that card's heading level to 5 or 6. The options do not exist, and anything outside 2/3/4 renders h3.
  3. Place a Card or an Icon Card under an h4 section. The title is always h3, so the outline skips backwards.
  4. Place a Hero Slider Container and leave the Slides slot empty. "Hero Slider" appears in the outline as an h2.

Proposed resolution

  • Add a heading_level prop (string, enum h1-h6, default h3) to card and card-icon, following the pattern already used by card-program, card-dated-vertical, accordion-block, share and hero-side-by-side.
  • Widen card-pricing's level enum to 1-6 and derive the tag from the level directly instead of the two-way test.
  • Render the card-pricing price as a p keeping its display-6 class, and the hero-slider-container placeholder as a p keeping its display-5 class.
  • Keep every default at today's value so the rendered output does not change: the visual size classes already carry the appearance, and no CSS selects on the heading tags.

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Re-export the Canvas component configs in Educare - the schema change moves the component version hashes, tracked in #3625238
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • Canvas gains a Heading level select on Card and Icon Card, default H3.
  • The Pricing Card's existing Heading level select gains H1, H5 and H6.

API changes

  • New optional heading_level prop on card and card-icon, and a widened level enum on card-pricing. Backward compatible - existing placements keep their current rendering.

Data model changes

  • N/A

Release notes snippet

  • Card, Icon Card and Pricing Card now let an author set the heading level, so a card can sit at the right depth in the page outline. The price and the Hero Slider placeholder are no longer headings.
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed b368103d on 1.0.x
    fix: #3625237 Decouple the card heading levels from the visual size
    
rajab natshah’s picture

Issue tags: -educare-1.0.3
rajab natshah’s picture

Assigned: Unassigned » josebc
Status: Active » Needs review
Issue tags: +vartheme_bs5_educare-1.0.2
rajab natshah’s picture

Assigned: josebc » mohammed j. razem
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.