Problem/Motivation
The Share (webshare) molecule in the Educare theme had the same axe-core WCAG 2.4.6 (Headings and Labels) heading-order violation as the Horizon Aid theme: its title always renders as a hardcoded <h3>, regardless of the heading level the surrounding section actually needs, so it breaks the document outline whenever the block sits under anything other than an <h2> section. This was already fixed on Educare in #3614488 (merged as MR !22). Horizon Aid's Share molecule is the same webshare:share override pattern with the identical hardcoded <h3>, so it needs the same fix.
Steps to reproduce
- Install the Horizon Aid site template, or open any Horizon Aid page that renders a Share block.
- 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, mirroring the Educare fix exactly:
- 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.
Merged as MR !9.
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_horizonaid-3614491
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 natshah