Handle nested divs in first_item_content

[CodeSonia]

What

Trello card

This PR addresses an issue where the content list was not displayed on some publication pages due to the way nested content elements were handled in the show_contents_list? method.

Context:

The show_contents_list? method uses various conditions to determine whether to display a content list. These rules were first introduced in PR #719.

Recently, a Zendesk ticket reported that the content list was missing from the DVSA Earned Recognition page page, resulting in an empty block of space on the left side of the publication.

The issue was traced to the method's ability to handle deeply nested content inside div elements.

Debugging:

During investigation, the following issues were identified on that page:

- first_item_content.length = 0 was inaccurately evaluated as 0
- first_item_has_long_content? = false
- first_item_content = "" was empty

However, this is not accurate, because the content includes multiple headings and subsections:

• An h2 section for "Driver system providers"
• Multiple h3 subsections like "A", "B", and "C", each containing p elements with contact details, all wrapped inside nested div tags.

The show_contents_list? method wasn't picking up this content due to the nested structure. As a result, the conditions returned false, causing the content list to be omitted.

Solution:

I updated the first_item_content method in contents_list.rb to handle nested divs and introduced other methods to extract valid elements p, ul, and ol inside a nested div element, ensuring that all content is considered.

Tests:

Several test cases have been added:

1. Test case for long content in nested elements: It shows the content list when the first item contains long content inside nested div elements.
2. Test case for short content in nested elements: Ensures that the content list is not shown when the first item contains short content, even if it is nested inside divs.
3. Deep div nesting: This tests that the method correctly extracts text from deeply nested divs while ignoring allowed elements

Testing:

The page now correctly renders the content list:

• first_item_content.length: 2817
• first_item_has_long_content? true
• first_item_content now captures the actual content.

Why

Without this fix, pages with only two content items and no recognised long content could fail to render the content list, leaving an empty whitespace that negatively impacts user experience.

Visual Changes

Before	After

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

[unoduetre]

div is checked separately in line 53, so adding it here doesn't change anything and is confusing, so it can be removed from this line. So line 55 can be also changed to not exclude it.

[unoduetre]

The first part of if only checks a single level of divs, so it won't find paragraphs inside nested divs e.g.:

<div>
  <div>
    <div>
      <p>
       text...
      </p>
    </div>
  </div>
</div>

It might solve the immediate problem with the particular document, but the problem will reappear when someone adds a document with more deeply nested divs.

If we want to find all nested paragraphs, a recursive solution would work, but is it what we want to do in the first place?

[CodeSonia]

Yeah that makes sense - I'll change this so I look for more deeply nested divs as like you said I only considered the first level 😅

[hannako]

This is some nice fancy code!! I think we should check that this is behaviour we actually want though first. I'm wondering if it might result in longer than expected contents lists as we nibble through every element on the page. Do you happen to have an example of a page with very nested content so we can look at the before an after?