Page MenuHomePhabricator

[ToC] clicking "beginning" should scroll you all the way to the top of the page
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

The first link in the table of contents is (for now) called "Beginning". When clicking that link you should be taken all the way to the top of the page, like so:

Note: if the page starts with a section heading, no introduction link should be added

Acceptance criteria

  • We add a heading to represent the "beginning" of an article. This should link to the top of the page.
  • (DESCOPED FOR NOW) By default the heading is "Beginning" but can be overwritten with a more suitable label (we recognize that some articles have a section heading called introduction)
  • This should be feature flagged as we recognize their may be some challenges rolling this out
  • If there is no lead section for now (empty introduction), the section heading will be shown. We'll reconsider this later.
NOTE: we are changing the copy from the prototype from "introduction" to "beginning"

Developer notes

This should be very straightforward. If the Introduction link is not available, we can inject it into the ToC. If it is available, then query the DOM for it.
Then we can set an onClick event on the intro link to scroll to the top using Window.scrollTo().

QA Results - Beta

ACStatusDetails
1T301254#7833933

QA Results - Prod

ACStatusDetails
1T301254#7845711

Event Timeline

ovasileva lowered the priority of this task from High to Medium.
cjming updated the task description. (Show Details)
cjming removed cjming as the assignee of this task.Feb 9 2022, 9:46 PM
cjming subscribed.
Jdlrobson removed the point value for this task.
Jdlrobson set the point value for this task to 2.
Jdlrobson changed the point value for this task from 2 to 3.

Cases we discussed in standup today:

  • what if the section after the lead section is titled "Introduction" (or whatever the word we use is)?
    • maybe give editors the ability to override the label for certain situations?
  • what if the article doesn't have a lead section
    • option 1: don't show this link
    • option 2: change the label to "Back to top" (or something else) so that people still have a way to get back to the top
  • what about other namespaces or non-standard article pages (like disambiguation pages, talk pages, etc.)
    • provide some kind of ability for projects to set page/namespace specific labels for this?
  • what about other projects (Commons, Wikidata, etc.)
    • provide some kind of ability for projects to hide this label and/or customize the label?

cc @ovasileva @Jdlrobson @RHo

ovasileva renamed this task from [ToC] clicking "introduction" should scroll you all the way to the top of the page to [ToC] clicking "beginning" should scroll you all the way to the top of the page.Feb 18 2022, 11:41 AM
ovasileva updated the task description. (Show Details)
ovasileva raised the priority of this task from Medium to High.Mar 14 2022, 11:37 AM

Cases we discussed in standup today:

  • what if the section after the lead section is titled "Introduction" (or whatever the word we use is)?
    • maybe give editors the ability to override the label for certain situations?

What available ways do we have of doing this? Would this live within the wikitext? I want to say this might be worth separating into a new task to explore possibilities. For now, maybe we could recommend that editors change the name of the first section instead?

  • what if the article doesn't have a lead section
    • option 1: don't show this link
    • option 2: change the label to "Back to top" (or something else) so that people still have a way to get back to the top

I'm leaning towards option 1 as it's an edge case that might not require introducing new functionality. @alexhollender_WMF - thoughts? Would it be okay to go ahead and add this to the acceptance criteria?

  • what about other namespaces or non-standard article pages (like disambiguation pages, talk pages, etc.)
    • provide some kind of ability for projects to set page/namespace specific labels for this?
  • what about other projects (Commons, Wikidata, etc.)
    • provide some kind of ability for projects to hide this label and/or customize the label?

cc @ovasileva @Jdlrobson @RHo

For now, maybe we could recommend that editors change the name of the first section instead?

It's going to be equal effort for an editor to change the table of contents lead section with a magic word as it is to provide a better heading for an existing heading. However, if we allow editors to change the heading in the table of contents, we'd be breaking internationalization, and adding a huge layer of inconsistency. Ideally we should avoid this, but this should be considered out of scope for this patch.

m leaning towards option 1 as it's an edge case that might not require introducing new functionality. @alexhollender_WMF - thoughts? Would it be okay to go ahead and add this to the acceptance criteria?

I suggest we create a follow up task given this is already estimated. Being able to detect an empty lead section is pretty tricky and adds a whole heap of other considerations.

For now, maybe we could recommend that editors change the name of the first section instead?

It's going to be equal effort for an editor to change the table of contents lead section with a magic word as it is to provide a better heading for an existing heading. However, if we allow editors to change the heading in the table of contents, we'd be breaking internationalization, and adding a huge layer of inconsistency. Ideally we should avoid this, but this should be considered out of scope for this patch.

+1, this sounds good to me as well.

m leaning towards option 1 as it's an edge case that might not require introducing new functionality. @alexhollender_WMF - thoughts? Would it be okay to go ahead and add this to the acceptance criteria?

I suggest we create a follow up task given this is already estimated. Being able to detect an empty lead section is pretty tricky and adds a whole heap of other considerations.

What would the current status quo be? The links shows and goes to the same location as the first heading?

Change 770968 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Table of contents links to beginning of article

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/5b4d5bfedb/w/

What would the current status quo be? The links shows and goes to the same location as the first heading?

Yep.

See behaviour here:
https://patchdemo.wmflabs.org/wikis/5b4d5bfedb/wiki/List_of_NCAA_Division_I_men's_ice_hockey_seasons?useskin=vector-2022&tableofcontents=1

(note this is showing both table of contents which wouldn't be the case )

Hey @alexhollender_WMF another question about a possible follow up task raised by Nick:

Should this have the same behavior as the other links in the TOC. That is:

  1. Should it appear bold when it is clicked?
  2. Should it appear bold when the user scrolls to the "Intro"?

I'm guessing yes from the video, but since this wasn't specified in acceptance criteria we (or at least I) didn't consider this in analysis.

Also, I wanted to check in on the acceptance criteria regarding scroll to the top of the page. We currently have an existing element in the DOM called #top which is the top of the article. I'm using this for now (https://patchdemo.wmflabs.org/wikis/5937270620/wiki/San%20Francisco?tableofcontents=1&useskin=vector-2022)

I was wondering if you know anything about the history of the existing element (presumably it's for accessibility purposes) and if we want the table of contents to jump to the top, it would make sense to redefine our existing definition for top of article.

Something to consider: When central notice banners are displayed it might be a bit of a jarring experience to scroll to the top of the article. See demo to get a sense for that.

Change 771686 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] WIP: Make beginning bold on scroll

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

I did a design review with Alex and confirmed that we want the bolding to occur to the new element and that clicking the table of contents should jump to the very top of the page. We should not touch the existing #top element as that's used by screen readers to jump to the start of the menu.

Change 772942 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Use String.prototype.indexOf instead of String.prototype.includes in AB.js

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

Change 772942 abandoned by Nray:

[mediawiki/skins/Vector@master] Use String.prototype.indexOf instead of String.prototype.includes in AB.js

Reason:

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

Change 770968 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Table of contents links to beginning of article

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

Change 771686 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make beginning bold on scroll

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

Please take a look at this on the beta cluster and move to QA.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Add a heading to represent the "beginning" of an article. This should link to the top of the page.

Screen Recording 2022-04-05 at 3.51.24 PM.mov.gif (754×1 px, 2 MB)

Screen Recording 2022-04-05 at 3.35.29 PM.mov.gif (754×1 px, 2 MB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki, hewiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Add a heading to represent the "beginning" of an article. This should link to the top of the page.

Screen Shot 2022-04-11 at 9.50.41 AM.png (521×1 px, 235 KB)

Screen Shot 2022-04-11 at 9.48.23 AM.png (582×852 px, 147 KB)

Looks good. Note that as a part of testing this, I've noticed that bolding as you scroll is no longer working:

Screen Shot 2022-04-12 at 11.41.29 AM.png (956×1 px, 841 KB)

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

https://patchdemo.wmflabs.org/wikis/5b4d5bfedb/w/

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

https://patchdemo.wmflabs.org/wikis/5937270620/w/