Background

Followup to https://phabricator.wikimedia.org/T363934
During work on T363934 it was found that the arrow icons needs to be rendered serverside in order to prevent the headings from shifting as the JS kicks in. This is consistent with how icons are handled in the original section collapsing implementation. This is necessary due to the fact that section collapsing applies to all headings with the highest level on a given page (i.e. if a page has h2s and h3s, collapsing will apply to all h2s).

User story

As a reader on office wikimedia and other projects using Parsoid I want to be able to collapse sections without layout shifts as the page loads

Requirements

• Parsoid section collapsing behavior matches non parsoid
• doesnt have layoutshift as JS loads in

Requirement

Ensure that Parsoid section collapsing behavior matches the non-Parsoid implementation, preventing layout shifts as JavaScript loads. The arrow icons should be rendered server-side to ensure stability during page load.

BDD

Feature: Fix Layout Shift on Parsoid Section Collapsing

  Scenario: Collapse sections without layout shift in Parsoid
    Given the user views a page using Parsoid with collapsible sections
    When the page loads
    Then no layout shift should occur as JavaScript initializes
    And the section collapsing behavior should match the non-Parsoid implementation

Test Steps

Test Case 1: Verify Section Collapsing Without Layout Shift on Parsoid

1. Visit a page using Parsoid with collapsible sections.
2. AC1: Confirm that no layout shift occurs as JavaScript loads.
3. AC2: Confirm that section collapsing behavior matches the non-Parsoid implementation.

Rollback plan

None necessary due to feature flag.

This task was created by Version 1.0.0 of the Web team task template

QA Results - Beta