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 &lt;h3&gt;, 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

  1. Install the Horizon Aid site template, or open any Horizon Aid page that renders a Share block.
  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, mirroring the Educare fix exactly:

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

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.
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 5abd85a2 on 1.0.x
    fix: #3614491 Configurable heading level on the Share component for...
rajab natshah’s picture

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.