Page MenuHomePhabricator

When navigating directly to a sub-section, the table of contents section should expand (if collapsed) and be bolded
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

If I follow a link that takes me directly to a sub-section within an article — for example: https://en.wikipedia.org/wiki/Paris#Tourism — the section (in this case Economy) should be expanded automatically, and the sub-section (in this case Tourism) should be bolded.

what currently happenswhat should happen
Screen Shot 2022-12-13 at 1.02.38 PM.png (1,374×755 px, 860 KB)
Screen Shot 2022-12-13 at 1.02.50 PM.png (1,374×754 px, 858 KB)

If the section is near the bottom of the page, the section doesn't bold at all (more details in T330118).

QA steps

As browsers can differ in their scroll behavior, please perform the following steps on Chrome, Edge, Safari, and Firefox. Please also note that the banners that can appear on beta can cause failures (see my note below):

When visiting a page with a hash fragment at the bottom of the page

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test#References
  2. Verify that "References" appears bold in the TOC

When visiting a page with a hash fragment in the middle of the page

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test#2022_European_Sambo_Cup
  2. Verify that "Sambo" is black (but not bold) and expanded. Verify that "2022 European Sambo Cup" is bolded. The scroll position should also correspond to this section.
  3. Scroll to the bottom of the TOC and click "References".
  4. Verify that "References" is bolded.
  5. Change your browser's location url to be https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test#2021%E2%80%9322_PSA_World_Tour
  6. Verify that "Squash" is black (but not bold) and expanded. Verify that "2021–22 PSA World Tour" is bolded.

When visiting a page without a hash fragment.

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test
  2. Verify that "Beginning" is bolded

If you observe any failures, it is most likely from the banners that sometimes load and cause a substantial layout shift/scroll event (T52865, T286658). This makes the code think that the user scrolled, and it reacts by bolding the section at the current scroll position instead of the one that corresponds to the hash fragment. You can confirm this is the cause by clicking on their respective hide buttons (pictured below) and refreshing the page. I noticed this on the first test case, but it went away after closing the banners and refreshing, so I'm not sure how much effort should go into fixing it.

2023-03-10_10-52-06.png (5,120×2,510 px, 1 MB)

@ovasileva I'm happy to create a new ticket for this case if needed.

QA Results - Beta

QA Results - Prod

Details

Event Timeline

ovasileva triaged this task as Medium priority.Dec 20 2022, 7:59 PM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog-Archived board.
ovasileva raised the priority of this task from Medium to High.Feb 17 2023, 10:33 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from When navigating directly to a sub-section, the table of contents section should expand (if collapsed) to When navigating directly to a sub-section, the table of contents section should expand (if collapsed) and be bolded.Feb 23 2023, 6:23 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Una_tantum.

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

[mediawiki/skins/Vector@master] Increase @scroll-padding-top to 60px

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

👆Ignore that patch, pasted the wrong ticket on it.

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

[mediawiki/skins/Vector@master] Expand and activate TOC section when page loads with hash fragment or hash fragment changes

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

Change 895312 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add hash fragment support to table of contents

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

• nray updated the task description. (Show Details)
• nray updated the task description. (Show Details)

Test Result - Beta

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

Test Artifact(s):

QA Steps

As browsers can differ in their scroll behavior, please perform the following steps on Chrome, Edge, Safari, and Firefox. Please also note that the banners that can appear on beta can cause failures (see my note below):

When visiting a page with a hash fragment at the bottom of the page

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test#References
✅ AC1: Verify that "References" appears bold in the TOC

ChromeEdgeSafariFirefox
Screen Recording 2023-03-12 at 4.52.27 PM.mov.gif (1,420×996 px, 695 KB)
Screen Recording 2023-03-12 at 5.05.13 PM.mov.gif (1,420×996 px, 685 KB)
Screen Recording 2023-03-12 at 5.14.41 PM.mov.gif (1,420×996 px, 610 KB)
Screen Recording 2023-03-12 at 5.23.07 PM.mov.gif (1,420×996 px, 579 KB)
When visiting a page with a hash fragment in the middle of the page

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test#2022_European_Sambo_Cup
✅ AC2: Verify that "Sambo" is black (but not bold) and expanded. Verify that "2022 European Sambo Cup" is bolded. The scroll position should also correspond to this section.

ChromeEdgeSafariFirefox
Screen Recording 2023-03-12 at 4.56.48 PM.mov.gif (1,420×996 px, 1 MB)
Screen Recording 2023-03-12 at 5.07.05 PM.mov.gif (1,420×996 px, 736 KB)
Screen Recording 2023-03-12 at 5.17.14 PM.mov.gif (1,420×996 px, 648 KB)
Screen Recording 2023-03-12 at 5.25.01 PM.mov.gif (1,420×996 px, 611 KB)

Scroll to the bottom of the TOC and click "References".
✅ AC3: Verify that "References" is bolded.

ChromeEdgeSafariFirefox
Screen Recording 2023-03-12 at 4.58.22 PM.mov.gif (1,420×996 px, 704 KB)
Screen Recording 2023-03-12 at 5.07.54 PM.mov.gif (1,420×996 px, 756 KB)
Screen Recording 2023-03-12 at 5.18.11 PM.mov.gif (1,420×996 px, 779 KB)
Screen Recording 2023-03-12 at 5.25.41 PM.mov.gif (1,420×996 px, 934 KB)

Change your browser's location url to be https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test#2021%E2%80%9322_PSA_World_Tour
✅ AC4: Verify that "Squash" is black (but not bold) and expanded. Verify that "2021–22 PSA World Tour" is bolded.

ChromeEdgeSafariFirefox
Screen Recording 2023-03-12 at 4.59.49 PM.mov.gif (1,420×996 px, 799 KB)
Screen Recording 2023-03-12 at 5.09.07 PM.mov.gif (1,420×996 px, 900 KB)
Screen Recording 2023-03-12 at 5.19.31 PM.mov.gif (1,420×996 px, 560 KB)
Screen Recording 2023-03-12 at 5.27.07 PM.mov.gif (1,420×996 px, 704 KB)
When visiting a page without a hash fragment.

Visit https://en.wikipedia.beta.wmflabs.org/wiki/Sports-toc-test
✅ AC5: Verify that "Beginning" is bolded

ChromeEdgeSafariFirefox
Screen Recording 2023-03-12 at 5.02.08 PM.mov.gif (1,420×996 px, 361 KB)
Screen Recording 2023-03-12 at 5.09.59 PM.mov.gif (1,420×996 px, 386 KB)
Screen Recording 2023-03-12 at 5.20.48 PM.mov.gif (1,420×996 px, 349 KB)
Screen Recording 2023-03-12 at 5.28.21 PM.mov.gif (1,420×996 px, 273 KB)
Edtadros removed Edtadros as the assignee of this task.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

As browsers can differ in their scroll behavior, please perform the following steps on Chrome, Edge, Safari, and Firefox. Please also note that the banners that can appear on beta can cause failures (see my note below):

When visiting a page with a hash fragment at the bottom of the page

Visit https://en.wikipedia.org/wiki/Paris#External_links
✅ AC1: Verify that "External Links" appears bold in the TOC

ChromeEdgeSafariFirefox
Screen Recording 2023-03-22 at 2.30.46 PM.mov.gif (1,118×942 px, 835 KB)
Screen Recording 2023-03-22 at 3.16.55 PM.mov.gif (1,118×942 px, 791 KB)
Screen Recording 2023-03-22 at 3.22.27 PM.mov.gif (1,118×942 px, 392 KB)
Screen Recording 2023-03-22 at 3.27.49 PM.mov.gif (1,118×942 px, 639 KB)
NOTE: During testing this task a regression was found related to the purple boxes at the bottom of the Occitan language page which caused a layout shift that caused the code to think the user scrolled. The details can be found in T332838
When visiting a page with a hash fragment in the middle of the page

Visit https://en.wikipedia.org/wiki/Paris#Restaurants_and_cuisine
✅ AC2: Verify that "Culture" is black (but not bold) and expanded. Verify that "Restaurants and cuisine" is bolded. The scroll position should also correspond to this section.

ChromeEdgeSafariFirefox
Screen Recording 2023-03-22 at 3.57.17 PM.mov.gif (1,118×942 px, 1 MB)
Screen Recording 2023-03-22 at 3.57.38 PM.mov.gif (1,118×942 px, 1 MB)
Screen Recording 2023-03-22 at 3.58.02 PM.mov.gif (1,118×942 px, 1 MB)
Screen Recording 2023-03-22 at 3.58.34 PM.mov.gif (1,118×942 px, 628 KB)

Scroll to the bottom of the TOC and click "References".
✅ AC3: Verify that "References" is bolded.

ChromeEdgeSafariFirefox
Screen Recording 2023-03-22 at 4.01.08 PM.mov.gif (1,118×942 px, 902 KB)
Screen Recording 2023-03-22 at 4.01.29 PM.mov.gif (1,118×942 px, 928 KB)
Screen Recording 2023-03-22 at 4.01.49 PM.mov.gif (1,118×942 px, 1 MB)

Change your browser's location url to be https://en.wikipedia.org/wiki/Paris#Climate
✅ AC4: Verify that "Geography" is black (but not bold) and expanded. Verify that "Climate" is bolded.

ChromeEdgeSafariFirefox
Screen Recording 2023-03-22 at 4.04.37 PM.mov.gif (1,118×942 px, 777 KB)
Screen Recording 2023-03-22 at 4.04.58 PM.mov.gif (1,118×942 px, 537 KB)
Screen Recording 2023-03-22 at 4.05.54 PM.mov.gif (1,118×942 px, 693 KB)
Screen Recording 2023-03-22 at 4.06.14 PM.mov.gif (1,118×942 px, 667 KB)
When visiting a page without a hash fragment.

Visit https://en.wikipedia.org/wiki/Marcel_Marceau
✅ AC5: Verify that "Top" is bolded

ChromeEdgeSafariFirefox
Screen Recording 2023-03-22 at 4.08.06 PM.mov.gif (1,118×942 px, 773 KB)
Screen Recording 2023-03-22 at 4.08.40 PM.mov.gif (1,118×942 px, 770 KB)
Screen Recording 2023-03-22 at 4.08.53 PM.mov.gif (1,118×942 px, 477 KB)
Screen Recording 2023-03-22 at 4.09.38 PM.mov.gif (1,118×942 px, 703 KB)