Background
Follow up work to T359001
User story
As a reader on office wikimedia and other projects using Parsoid I want to be able to collapse sections.
Requirements
- JavaScript/CSS has been added that allows sections to be collapsed or expanded.
- The code is guarded so it only applies to Parsoid views.
- The sections are expanded by default (pending no decision on T363933 we will do the simplest possible thing here in the mean time)
- Section collapsing has appropriate semantics indicating the expanded/collapsed status of a section, and that the header is a button. Reference the original accessibility implementation of section collapsing to confirm
Note: Remembering collapsed/expanded sections on back button is not in scope for this ticket.
Requirement
Enable section collapsing on Parsoid HTML, ensuring sections can be expanded or collapsed by clicking the heading or arrow, and that collapsed sections are searchable using "Find in page".
BDD
Feature: Section Collapsing on Parsoid HTML
Scenario: Expand and Collapse Sections
Given the user is viewing a page with sections in Parsoid HTML
When the user clicks on a section heading or arrow
Then the section should collapse or expand
Scenario: Search Within Collapsed Sections
Given the user is using "Find in page"
When the user searches for text in collapsed sections
Then the text should be searchableTest Steps
Test Case 1: Expand and Collapse Sections
- Navigate to an article page.
- Click on a section heading or arrow.
- AC1: Confirm that the section collapses or expands.
Test Case 2: Search Within Collapsed Sections
- Navigate to an article page.
- Use "Find in page" to search for text in a collapsed section.
- AC2: Confirm the text in the collapsed section is searchable.
QA steps
- If I view a page with sections, I can expand and collapse sections by clicking on the heading or the up/down arrow.
- I can use "Find in page" on text in collapsed sections.
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
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T363934#9942531 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T363934#10020126 |
| 2 | ✅ | T363934#10020126 |
