Page MenuHomePhabricator

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

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

Screen_Shot_2022-01-19_at_12.03.42_PM-1.png (780×518 px, 46 KB)
Screen_Shot_2022-01-19_at_12.03.23_PM.png (1×536 px, 81 KB)
collapsed stateexpanded 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

ACStatusDetails
1T299361#7745195
2T299361#7745195
3T299361#7745195

Event Timeline

ovasileva triaged this task as Medium priority.Jan 17 2022, 5:14 PM
ovasileva raised the priority of this task from Medium to High.Jan 24 2022, 6:27 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 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

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)

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

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 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

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

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

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

LGoto added a subscriber: Edtadros.
cjming added a subscriber: cjming.

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

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)

❌ 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?

nray added a subscriber: nray.

❓ 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 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

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

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

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/