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 <h3>, 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
- Install the Educare site template, or open any Educare page that renders a Share block (e.g. a news article or an event page).
- Run an axe-core heading-order check on that page (e.g. the Varbase functional testing suite's a11y step, or axe DevTools).
- 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_levelprop tocomponents/molecules/share/share.component.yml(integer, enum 2-6, default 2). - Use it in
share.twig:<h{{ heading_level }}>instead of the hardcoded<h3>. - Visual size stays fixed via the existing
webshare__headingclass, 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.
Issue fork vartheme_bs5_educare-3614488
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 #3
rajab natshahComment #5
rajab natshahComment #7
rajab natshahComment #8
rajab natshahComment #9
rajab natshahComment #10
rajab natshah✅ Released vartheme_bs5_educare-1.0.0-alpha1