Problem/Motivation

An axe-core accessibility audit of the Educare site template found a moderate WCAG 2.4.6 (Headings and Labels) heading-order violation repeated across the template: heading levels skip (e.g. a section <h2> followed directly by a card <h5>, or an <h1>→<h2>→<h5> gap). It was found on the homepage, /programs, a program page, a news article, /events, an event page and /about.

On the theme side, one root cause is the Share (webshare) molecule: its title always renders as a hardcoded &lt;h3&gt;, regardless of the heading level the surrounding section actually needs, so it breaks the outline whenever it sits under anything other than an <h2> section. See also the related recipe issue #3614489, which fixes the same audit finding on the Educare recipe's cards and FAQ accordion.

Steps to reproduce

  1. Install the Educare site template, or open any Educare page that renders a Share block (e.g. a news article or an event page).
  2. Run an axe-core heading-order check on that page (e.g. the Varbase functional testing suite's a11y step, or axe DevTools).
  3. Observe the heading-order violation: the Share block's <h3> title does not follow the heading level of the section it is placed in.

Proposed resolution

Decouple the heading LEVEL from the visual SIZE:

  • Add a heading_level prop to components/molecules/share/share.component.yml (integer, enum 2-6, default 2).
  • Use it in share.twig: &lt;h{{ heading_level }}&gt; instead of the hardcoded &lt;h3&gt;.
  • Visual size stays fixed via the existing webshare__heading class, so callers can set the correct semantic level without changing how the title looks.

Verified: axe heading-order is 0 across the 7 affected pages on a fresh install; card/heading visual sizes are unchanged; gitlab-ci-local is green on this repo. Merged as MR !22.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ 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

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Fixed a heading-order accessibility issue on the Share component by making its heading level configurable.
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 9d7f223b on 1.0.x
    fix: #3614488 Configurable heading level on the Share component for...
rajab natshah’s picture

Issue summary: View changes
Status: Active » 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.

rajab natshah’s picture

Version: 1.0.x-dev » 1.0.0-alpha1
Assigned: Unassigned » josebc
Issue summary: View changes
Status: Fixed » Needs review
Issue tags: +vartheme_bs5_educare-1.0.0-alpha1
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.