ToC: Allow Table of Contents to collapse/expand sections on section click
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	ovasileva
	Jan 17 2022, 5:14 PM

Description

User Story

As a reader, I want to be able to see a shorter version of the ToC so that I can scan it more quickly

Design Spec


collapsed state	expanded state

When a section is collapsed, all of its subsections are hidden.
When a section is expanded, all of its subsections are visible.
Collapsing/expanding behaviour only applies to top-level sections.

UI Behaviour

When clicking on a ToC section link:

It should "activate" (scroll to corresponding section and bolden the text)
The corresponding ToC section should expand

Default states

NOTE: Although the current design suggests the ToC should be collapsed by default, the implementation should accommodate "expanded by default" in the future (possibly as a user preference).

Collapsed by default: Sections should expand when clicking the top-level section headings.
Expanded by default (potentially in the future):-sections should remain expanded when scrolling and clicking. No collapsing should occur.

Prototype

https://di-toc-phase2.web.app/Silver

A11Y & I18N considerations

The arrow should point left for RTL languages when collapsed (◀) and be aligned with the beginning of the text.
This feature (expanding and collapsing) should be disabled for users with the prefers-reduced-motion flag enabled in their browser. With this flag enabled, the ToC should essentially fall back to the no-js version.

no-js version

Given that expanding and collapsing on scroll requires Javascript, this feature should be limited to browsers with JS enabled. If javascript is disabled, the table of contents should just be expanded by default and the arrows should not appear.

Screen Shot 2022-01-27 at 12.16.10 PM.png (1×504 px, 105 KB)

Acceptance Criteria

Sections will have the ability to collapse and uncollapse the subsections within them
Collapsing and uncollapsing will be achieved by selecting the section name
Sections will be collapsed by default when total section count is >= 20
[] A unit test should be added to Vector modelling the behaviour

QA Results - Beta

AC	Status	Details
1	❌	T299361#7745195
2	✅	T299361#7745195
3	❓	T299361#7745195

Details

Subject	Repo	Branch	Lines +/-
Use TOC template data for showing collapsible section arrows	mediawiki/skins/Vector	master	+107 -69
Add template data to support TOC collapsible section arrows in Vector	mediawiki/core	master	+34 -9
Collapse ToC by default & expand sections when clicking section headings	mediawiki/skins/Vector	master	+349 -67

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T273473 [Epic] Improve the table of contents
Resolved	Jdrewniak	T299361 ToC: Allow Table of Contents to collapse/expand sections on section click
Resolved	Jdlrobson	T300561 [subtask] Setup unit tests in Vector

Event Timeline

ovasileva created this task.Jan 17 2022, 5:14 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 17 2022, 5:14 PM

ovasileva triaged this task as Medium priority.Jan 17 2022, 5:14 PM

Jdrewniak updated the task description. (Show Details)Jan 20 2022, 4:16 PM

Jdrewniak moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Lens0021 subscribed.Jan 20 2022, 4:57 PM

ovasileva raised the priority of this task from Medium to High.Jan 24 2022, 6:27 PM

Jdlrobson moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Jan 24 2022, 7:05 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson set the point value for this task to 5.

Jdlrobson updated the task description. (Show Details)

Jdrewniak renamed this task from ToC: Allow ToC to collapse/uncollapse sections to ToC: Allow Table of Contents to collapse/uncollapse sections.Jan 26 2022, 4:30 PM

Jdrewniak updated the task description. (Show Details)

The "pinned" functionality has been moved into a separate task: T300167

Jdrewniak updated the task description. (Show Details)Jan 27 2022, 5:19 PM

Jdrewniak updated the task description. (Show Details)Jan 27 2022, 5:22 PM

Jdrewniak renamed this task from ToC: Allow Table of Contents to collapse/uncollapse sections to ToC: Allow Table of Contents to collapse/expand sections.Jan 27 2022, 6:12 PM

Change 757918 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] WIP: Setup jest and add basic test case

https://gerrit.wikimedia.org/r/757918

gerritbot added a project: Patch-For-Review.Jan 31 2022, 6:24 PM

bwang mentioned this in T300561: [subtask] Setup unit tests in Vector.Jan 31 2022, 6:32 PM

bwang added a subtask: T300561: [subtask] Setup unit tests in Vector.

Jdrewniak mentioned this in T300167: ToC: Allow Table of Contents to pin expanded sections.Feb 1 2022, 5:28 PM

Is the opening/closing functionality on scroll also part of this task?

Jdrewniak renamed this task from ToC: Allow Table of Contents to collapse/expand sections to ToC: Allow Table of Contents to collapse/expand sections on scroll.Feb 1 2022, 7:11 PM

Jdrewniak updated the task description. (Show Details)

@bwang yes, this task is about opening/closing on scroll and when clicking the section heading (which also scrolls the page, so it's really about scroll position). I updated the description and title. The first screenshot was a little misleading because it included the triangle icons, which are more related to T300167.

I'm not sure if adding the triangle icons is necessary for this task. Adding them would give some visual cue that the section can be expanded, but they wouldn't have any added functionality until T300167.

Here's the image of the ToC with the triangle icon (a.k.a expand indicators?) for reference.

Screen Shot 2022-01-19 at 12.03.23 PM.png (1×536 px, 82 KB)

Jdlrobson closed subtask T300561: [subtask] Setup unit tests in Vector as Resolved.Feb 2 2022, 12:03 AM

Jdrewniak claimed this task.Feb 2 2022, 7:27 PM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 760661 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [WIP] Collapse Table of Content by default & expand on scroll

https://gerrit.wikimedia.org/r/760661

cjming mentioned this in T300973: [ToC] Dynamically expand/collapse sub-sections in ToC based on # of headings.Feb 9 2022, 12:16 AM

As discussed in standup yesterday we will not be shipping this as default functionality. Reasons:

There was a decent amount of negative feedback from testing (people found it to be distracting)
Given that we will be automatically expanding all sub-sections on page load for some articles this is less needed (T300973)
After further consideration I feel like this functionality is somewhat redundant because when you've scrolled to a section you (in many cases) can already see the sub-sections within it just by looking at the article itself

There were also many people who really liked this functionality so maybe we should consider making it available via a preference in the future.

Jdrewniak renamed this task from ToC: Allow Table of Contents to collapse/expand sections on scroll to ToC: Allow Table of Contents to collapse/expand sections on section click.Feb 10 2022, 3:57 PM

Jdrewniak removed Jdrewniak as the assignee of this task.

Jdrewniak moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdrewniak updated the task description. (Show Details)

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/3bf7de23cc/w/

I've modified this ticket to adhere to the latest design decisions, so right now the patch included expanding and collapsing sections only when clicking the top-level section headings, and having the sections collapsed by default.

https://patchdemo.wmflabs.org/wikis/3bf7de23cc/wiki/Paris?useskin=vector-2022&tableofcontents=true

LGoto assigned this task to bwang.Feb 10 2022, 6:08 PM

Jdrewniak updated the task description. (Show Details)Feb 14 2022, 4:25 PM

Jdrewniak updated the task description. (Show Details)Feb 14 2022, 4:45 PM

Change 762512 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Use TOC template data for showing collapsible section arrows

https://gerrit.wikimedia.org/r/762512

Change 762485 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/core@master] Add template data for TOC collapsible section arrows

https://gerrit.wikimedia.org/r/762485

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 15 2022, 1:32 AM

bwang removed bwang as the assignee of this task.Feb 15 2022, 6:07 PM

bwang claimed this task.

bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

bwang reassigned this task from bwang to Edtadros.Feb 15 2022, 7:16 PM

bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 760661 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Collapse ToC by default & expand sections when clicking section headings

https://gerrit.wikimedia.org/r/760661

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.23; 2022-02-21).Feb 15 2022, 8:00 PM

LGoto reassigned this task from Edtadros to cjming.Feb 17 2022, 6:20 PM

LGoto added a subscriber: Edtadros.

cjming reassigned this task from cjming to Edtadros.Feb 17 2022, 6:22 PM

cjming subscribed.

Change 762485 merged by jenkins-bot:

[mediawiki/core@master] Add template data to support TOC collapsible section arrows in Vector

https://gerrit.wikimedia.org/r/762485

Change 762512 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use TOC template data for showing collapsible section arrows

https://gerrit.wikimedia.org/r/762512

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.24; 2022-02-28); removed MW-1.38-notes (1.38.0-wmf.23; 2022-02-21).Feb 22 2022, 11:00 PM

ovasileva moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 24 2022, 6:11 PM

ovasileva moved this task from QA in Prod to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Test Result - Beta

Status: ❌
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

❌ AC1: Sections will have the ability to collapse and uncollapse the subsections within them
Unable to collapse subsections, see the screen gif of Abraham Lincoln: Presidency>Judicial appointments. Unable to collapse Judicial appointments. Is this considered a subsection?

Screen Recording 2022-03-01 at 9.42.05 AM.mov.gif (938×992 px, 1 MB)

Screen Recording 2022-03-01 at 9.43.13 AM.mov.gif (938×992 px, 1 MB)

✅ AC2: Collapsing and uncollapsing will be achieved by selecting the section name
See above

❓ AC3: Sections will be collapsed by default
Previously there was a task that identified a threshold of 20 sections where above that the TOC would be collapsed, but below, they would be expanded. That looks to be the case. See the Cat Behavior image with less than 20 sections, it by default is expanded.

Screen Shot 2022-03-01 at 9.47.01 AM.png (619×648 px, 135 KB)

Edtadros updated the task description. (Show Details)Mar 1 2022, 5:50 PM

LGoto reassigned this task from cjming to bwang.Mar 1 2022, 6:12 PM

❌ AC1: Sections will have the ability to collapse and uncollapse the subsections within them
//Unable to collapse subsections, see the screen gif of Abraham Lincoln: Presidency>Judicial appointments. Unable to collapse Judicial appointments.

@Jdrewniak You mention clicking the section heading should expand AND collapse here, but the patch suggests it should only expand. Could you clarify here if AC1 is a pass or failure?

❓ AC3: Sections will be collapsed by default

I've updated the AC to reflect the work done in T300973. The sections will/should only be collapsed by default when >= 20 total sections

bwang reassigned this task from bwang to Jdrewniak.Mar 3 2022, 5:12 PM

@bwang sorry, that's a bit confusing. From the screenshots @Edtadros posted AC1 is a pass.

Only top-level sections should expand and collapse. Subsections should always remain expanded.
Clicking the heading of a top-level section will expand it. Clicking it again won't do anything, the section will remain expanded.
Only clicking the arrow button beside the section will collapse it.

I admit the AC could have been clearer... but it looks to be working from what I can see. Sending it to sign-off.

AC1 Sections will have the ability to collapse and uncollapse the subsections within them

Confirmed on https://en.wikipedia.org/wiki/Group_(mathematics)?tableofcontents=1

AC2 Collapsing and uncollapsing will be achieved by selecting the section name

Confirmed on https://en.wikipedia.org/wiki/Group_(mathematics)?tableofcontents=1

AC3 Sections will be collapsed by default when total section count is >= 20

on https://en.wikipedia.org/wiki/Group_(mathematics)?tableofcontents=1 (>20) sections are collapsed by default
on https://en.wikipedia.org/wiki/Associative_property?tableofcontents=1 (< 20) sections are expanded by default

I think we're okay to resolve. (cc @Edtadros )

Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/3bf7de23cc/w/~~

	F34971426: Screen Shot 2022-03-01 at 9.47.01 AM.png
	Mar 1 2022, 5:49 PM

	F34971422: Screen Recording 2022-03-01 at 9.42.05 AM.mov.gif
	Mar 1 2022, 5:49 PM

	F34971424: Screen Recording 2022-03-01 at 9.43.13 AM.mov.gif
	Mar 1 2022, 5:49 PM

	F34939871: Screen_Shot_2022-01-19_at_12.03.23_PM.png
	Feb 1 2022, 7:11 PM

	F34939873: Screen_Shot_2022-01-19_at_12.03.42_PM-1.png
	Feb 1 2022, 7:11 PM

	F34933232: Screen Shot 2022-01-27 at 12.16.10 PM.png
	Jan 27 2022, 5:19 PM

	F34923415: Screen Shot 2022-01-19 at 12.03.42 PM.png
	Jan 20 2022, 4:16 PM

	F34923419: Screen Shot 2022-01-19 at 12.03.23 PM.png
	Jan 20 2022, 4:16 PM

ToC: Allow Table of Contents to collapse/expand sections on section clickClosed, ResolvedPublic5 Estimated Story PointsActions

Description

User Story

Design Spec

UI Behaviour

Default states

Prototype

A11Y & I18N considerations

Acceptance Criteria

QA Results - Beta

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

ToC: Allow Table of Contents to collapse/expand sections on section click
Closed, ResolvedPublic5 Estimated Story Points
Actions

Related Objects
Search...