MWPW-136885: More SEO-friendly, improved accessibility in merch cards

[Axelcureno]

Programmatically replaces heading tag names in cascading order to improve SEO and accessibility in Merch cards.
The hierarchal order is the following:

• 1st heading: H3
• 2nd heading: H4
• 3rd heading: H5

Note: No merch card should have more than 3 headings.

Resolves: MWPW-136885

Test URLs:

• Before: https://main--milo--axelcureno.hlx.page/docs/library/kitchen-sink/merch-card
• After: https://mwpw-136885--milo--axelcureno.hlx.page/docs/library/kitchen-sink/merch-card

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.66%. Comparing base (6701caa) to head (7167df2).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1791      +/-   ##
==========================================
- Coverage   95.67%   95.66%   -0.01%     
==========================================
  Files         159      159              
  Lines       41254    41262       +8     
==========================================
+ Hits        39471    39475       +4     
- Misses       1783     1787       +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[npeltier]

const newElement = createTag(tagName, element.attributes, element.innerHTML, { parent: merchCard});

[Axelcureno]

Fixed

[npeltier]

does not look like it

[Axelcureno]

Sorry, I got confused with the another comment.
I tried doing your suggestion, but it seems element.attributes returns a NamedNodeMap which is not compatible with createTag().

[aem-code-sync]

Page	Scores	Audits	Google
/docs/library/kitchen-sink/merch-card

[rgclayton]

A few observations.

If I author the title with an <h> tag other than <h3> the font size is different. The DOM is changed to an <h3> though if it's the first title, like your code says.

To me it seems like if you are going to the trouble to change the title element to something specific the font size should stay consistent? Or maybe that's expected? Seems odd.

If I author with an <h1>, <h5> or <h6> the title is not rendered at all. Why not look for these so they at least render?

Sample page I test with.

[Axelcureno]

A few observations.

If I author the title with an <h> tag other than <h3> the font size is different. The DOM is changed to an <h3> though if it's the first title, like your code says.

To me it seems like if you are going to the trouble to change the title element to something specific the font size should stay consistent? Or maybe that's expected? Seems odd.

If I author with an <h1>, <h5> or <h6> the title is not rendered at all. Why not look for these so they at least render?

Sample page I test with.

@rgclayton thanks for the comment, you brought a good point.
I started a discussion about it to make things easier for authors: https://github.com/orgs/adobecom/discussions/1799

[npeltier]

requesting discussion to be solved before going on :)