Problem/Motivation

On the Contact Us page the regional label is marked up as a bolded paragraph rather than a heading:

<p><strong>US & Canada</strong></p><p>Phone Number: (408) 329 9888<br>Address: 3080 Olcott St, Suite A115, Santa Clara, CA 95054</p>

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

Editoria11y flags it as textPossibleHeading. It is the only instance on the site: a sweep of eleven pages (/, /about, /programs, /news, /events, /newsletter, /contact-us, a news article, an event, a program, and /user/1) found no other bolded pseudo-heading.

It appears twice in the recipe, and both need the same change:

  • 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)

Related, but separate: #3625237 (Vartheme BS5 Educare, card heading levels) and #3625238 (Educare, Canvas config re-export). Those are about components; this one is about default content.

Steps to reproduce

  1. Install Drupal CMS with the Educare site template.
  2. Visit /contact-us as an editor with Editoria11y enabled.
  3. Editoria11y reports textPossibleHeading on "US & Canada".
  4. Inspect the heading outline: H1 "Contact Us" → H2 "Ask us about anything" → H3 "Contact Information", and then nothing for the regional block.

Proposed resolution

Make it a real h4, the level that follows the "Contact Information" H3 it sits under, while keeping the appearance byte-identical:

<h4 class="fs-5 fw-bold lh-base mb-3">US & Canada</h4>

The classes were chosen by measurement, not by eye. Computed styles of the existing bolded paragraph on the rendered page are font-size 18px, line-height 27px, font-weight 700, margin-bottom 16px, colour rgb(5, 8, 51), family Sora. fs-5 fw-bold lh-base mb-3 on an h4 reproduces all six exactly, and the rendered box height is 27px against the paragraph's 27px. The theme applies text-transform: capitalize to headings, which has no visible effect on this already-capitalised string.

Same principle as #3625237: the heading level carries the semantics, a utility class carries the visual size.

Remaining tasks

  • ✅ File an issue
  • ❌ Change both the Contact Split pattern and the Contact Us default content, so a newly placed pattern is correct too
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ 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

  • None visually, the rendered result is identical. The contact regions gain a heading in the outline.

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A

Issue fork educare-3625240

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 committed 6fef89e0 on 1.0.x
    fix: #3625240 Make the contact region label a real heading component
    
rajab natshah’s picture

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

Assigned: Unassigned » josebc
Status: Active » Needs review
Issue tags: +educare-1.0.4

✅ Released educare-1.0.4

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.