DP-32426: Fix A11y heading issue on news page

[arthurbaghdas]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

Related Issue / Ticket

• [JIRA issue]()
• [Github issue]()

Steps to Test

1.

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

*

@TODO

*

Today I learned...

[ygannett]

@arthurbaghdas I'm sorry for the long description, but this explains what I did and how it's expected to work. Let me know for any questions.

---

The components are used in the following page types: In the main column

• Organization (Recent news & announcements)
• Press listing

In the side column

• Binder (RELATED)
• Rules of court (RELATED)
• Advisory (RELATED)
• News (RELATED)
• Executive order (RELATED)

  ---

  In Mayflower, I set up default heading levels for listing items per display pattern of:

  1. in the main column + comp heading -> section content
  2. in the main column + NO comp heading -> listing page
  3. in the side column + sidebar heading

This covers when the press listing component is added to any page type in the future in addition to the above page types.

In _packages/patternlab/styleguide/source/patterns/03-organisms/by-author/press-listing.twig,

L.2 teaserHeading is the default heading level of listing items. This default value does not need to be increased by 1 when the value is passed to the teaser (= child) template.

L.10 and L.16 define the heading level for listing items. When compHeading or sidebarHeading has its level value (compHeading.level or sidebarHeading.level), this value needs to be increased by 1 to be used as a listing item heading (pressTeaser.level) before passed to the teaser template.

{% set teaserHeadingLevel = compHeading.level ? (compHeading.level + 1) : 3 %}

{% set teaserHeadingLevel = sidebarHeading.level ? (sidebarHeading.level + 1) : 3 %}

This set-up works in Mayflower. All heading levels are correctly defined.

---

In openmass, the press listings for org pages are added as stacked row sections.

Visually, the sections have their comp headings, but the heading data is not associated with the listing data to be processed in the press-listing.twig. When the listing data is sent to the press-listing.twig, there is no comp heading data. This results in the data being processed differently from the Mayflower sample org pages (e.g., /patterns/05-pages-organization/05-pages-organization.html).

Technically, these sections have their comp headings, so they shouldn't be processed as ones that don't have comp headings (e.g., Press listing page).

The press listing page (/patterns/05-pages-press-listing/05-pages-press-listing.html) is valid with no comp heading data. In this case, the default value at L.2 is applied for the listing item heading level.

The template still needs to receive the listing item heading value without the comp heading data with stacked row sections. It's improper to adjust the default value or add fake comp heading level data for this particular pattern.

---

Since the heading level for the listing item with stacked row sections could vary based on where the sections are added on the page, L.37 is added to directly pass the listing item heading level value to the template.

{% set pressTeaser = pressTeaser|merge({"level": teaserHeadingLevel}) %}

Once the pressListing.items.level (= pressTeaser.level)is set to 3 for the org page in openmass, the listing item headings are rendered with the correct heading level.