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
- Install Drupal CMS with the Educare site template.
- Visit
/contact-usas an editor with Editoria11y enabled. - Editoria11y reports
textPossibleHeadingon "US & Canada". - 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
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
Comment #4
rajab natshahComment #5
rajab natshah✅ Released educare-1.0.4
Comment #6
rajab natshahComment #7
rajab natshah