[Visual refinements] Bold active section in ToC
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

In Vector 2022 the table of contents remains fixed in the sidebar as you scroll down the page. One thing this enables us to do is highlight the "active" section link in the table of contents (i.e. the section link for the section you are currently reading). We recently asked the community for feedback regarding how we should style the active section link:

The feedback was that we should style the active link in bold:

Screen Shot 2022-08-05 at 11.36.06 AM.png (224×1 px, 129 KB)

(Link to summary of community feedback)

To-do

  • Style the active section link in the ToC in bold

Screen Shot 2022-08-05 at 11.45.06 AM.png (1×3 px, 3 MB)

  • If the active section is a child section, but the parent section is not expanded, style the parent section in bold

Screen Shot 2022-08-05 at 11.47.44 AM.png (1×3 px, 2 MB)

  • Ensure that there is no (or minimal) line wrapping when a section link gets bolded

QA Results - Beta

QA Results - Prod

Event Timeline

and the accompanying patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/814840

This bolds the font and stretches the width of the active element to 100% of the TOC width + TOC padding, (i.e. to the very edge of the sidebar container).

That should prevent text-wrapping due to bolding as best a possible, but on some OS's or browsers, it might result in the text of the active element overlapping the scrollbar (only when the scrollbar is visible of course). I'd consider that a minor edge-case though.

{F35419362}

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

[mediawiki/skins/Vector@master] TOC with bold text.

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

LGoto reassigned this task from cjming to bwang.
LGoto added a subscriber: cjming.
bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
bwang subscribed.

@Jdrewniak, @bwang - did a quick check on this, and I'm seeing the following:

When I go to the "dog" article, the hearing section is immediately bolded without my scrolling to it (https://en.wikipedia.beta.wmflabs.org/wiki/Dog)

Screen Shot 2022-08-23 at 11.16.43 AM.png (1×2 px, 704 KB)

When I go to the "domestication" article the bolding doesn't appear (https://en.wikipedia.beta.wmflabs.org/wiki/Domestication)

Screen Shot 2022-08-23 at 11.17.21 AM.png (1×1 px, 527 KB)

@olga sorry the patch hadn't been merged when you tested that (CI issue). It should be merged shorty though.
You did discover an interesting edge case though! Wikitext heading can contain HTML, and the "Hearing" heading actually contains a <b> (bold) tag.

We could attempt to override that specific style with font-weight:normal but maybe there is a use-case for intentionally adding the <b> tag? not sure.

Change 814840 merged by jenkins-bot:

[mediawiki/skins/Vector@master] TOC with bold text.

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

The patch is live on beta now. Looking at the Dog article, you can see that the "Hearing" heading is still bold, but the active section is still distinguished by being colored black and bold.

Screen Shot 2022-08-23 at 8.59.11 AM.png (1×1 px, 298 KB)

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Style the active section link in the ToC in bold

Screen Shot 2022-08-29 at 7.20.16 PM.png (543×1 px, 224 KB)

⬜ AC2: If the active section is a child section, and the parent section is expanded, style the parent section in black but not bold
It looks bolded
Screen Shot 2022-08-29 at 7.19.34 PM.png (502×657 px, 117 KB)

Per T314670#8199135 this AC has been removed.
✅ AC3: If the active section is a child section, but the parent section is not expanded, style the parent section in bold
Screen Shot 2022-08-29 at 7.21.07 PM.png (542×1 px, 169 KB)

✅ AC4: Ensure that there is no (or minimal) line wrapping when a section link gets bolded
One more character and this wraps, I'm not sure if this is what is meant by minimal/no
Screen Shot 2022-08-29 at 7.21.44 PM.png (506×1 px, 153 KB)

See T314670#8208969 for explanation of wrapping concern

@Edtadros apologies for not updating the acceptance criteria. I've removed AC2, which will be handled here instead: T316032: [Visual refinements] Bold active section in ToC (Part 2!)

regarding AC4, I'm not seeing any line wrapping happening on https://en.wikipedia.beta.wmflabs.org/wiki/Hooded_skunk as I scroll through the sections. Can you clarify what you're seeing there?

@alexhollender_WMF , I think I need more clarification as to what the line wrapping behavior should be.

@alexhollender_WMF , I think I need more clarification as to what the line wrapping behavior should be.

@Edtadros when the active section link gets bolded it gets wider. In the past this was leading to certain section links wrapping onto a new line when they were active/bolded. Jan added some special padding to protect against this wrapping in most cases. Below is a screen recording that shows what we don't want...the "Other relationship with humans" section link wraps onto a new line when it's active/bolded:

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Style the active section link in the ToC in bold

Screen Recording 2022-09-06 at 2.13.15 PM.mov.gif (648×486 px, 908 KB)

⬜ AC2: If the active section is a child section, and the parent section is expanded, style the parent section in black but not bold
Per T314670#8199135 this AC has been removed.
✅ AC3: If the active section is a child section, but the parent section is not expanded, style the parent section in bold
Screen Recording 2022-09-06 at 2.15.24 PM.mov.gif (648×656 px, 2 MB)

✅ AC4: Ensure that there is no (or minimal) line wrapping when a section link gets bolded
See T314670#8208969 for explanation of wrapping concern. See AC1 for screen capture.

Looks good! Resolving.