[Global] Heading structure _may_ be out of order

[svinkle]

Issue summary

In any section instance which includes h3 headings, heading structure could become out of order if the merchant removes the section "Heading" setting text.

For example, a product detail page with a multicolumn section with no title, the page heading structure includes a primary h1 then subheading h3 for each multicolumn item.

This would lead to a confusing user experience when screen reader user navigate via headings alone.

Screenshots

Steps to reproduce

1. Go to a Studio demo store PDP page with any supported browser
2. With an active screen reader, navigate by headings alone

Behavior

Expected

• Section h2 headings to existing the page.

Actual

• Section h2 headings are missing.

Recommendation

When the merchant removes the section heading text, instead of removing the h2:

1. Keep the heading h2 in the DOM.
2. Apply the .visually-hidden class to remove the heading visually
3. Set the h2 title text as the default text for the section:
   • Featured collection: "Featured collection"
   • Collage: "Multimedia collage"
   • Multicolumn: "Multicolumn"
   • Blog posts: "Blog posts"
   • Collection list: "Collections"

These changes will keep the inteded heading structure intact and inform the user of the section purpose/content type.

- <section>
-- section title (h2)
--- item title (h3)
--- item title (h3)

Recommended code

HTML

<h2
  class="visually-hidden"
  data-live-text-setting="section.template--15459810640040__1643899285fb6b3031.title/escape"
>
  Multicolumn
</h2>

Specifications

• Dawn version: 3.0
• Browser: Any
• Component: Global
• WCAG Principal: Operable
• WCAG SC: 2.4.10 Section Headings
• Severity: Medium
• Effort: Low