Page MenuHomePhabricator
Create Task
Maniphest T310828

TOC menu and clicking behavior
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
None
Authored By
• alexhollender_WMF
Jun 16 2022, 6:31 PM
Tags
Referenced Files
F35475029: toc clicking.webm
Aug 18 2022, 5:08 PM
F35470571: spacebar enter.mov-A32B3834-7CDF-49FE-9122-12FB62173FC2.gif
Aug 17 2022, 9:03 PM
F35470548: Screen Recording 2022-08-17 at 3.46.12 PM.mov-14D1ED8F-3E4C-44D0-8F87-35715CF75A4E.gif
Aug 17 2022, 9:03 PM
F35328707: clicking Beta from preferences.webm
Jul 21 2022, 5:22 PM
F35287030: toc current behavior.webm
Jun 29 2022, 5:54 PM
F35247404: Kapture 2022-06-16 at 14.30.24.webm
Jun 16 2022, 6:31 PM
F35247396: menu closing upon interaction.webm
Jun 16 2022, 6:31 PM
Subscribers
Aklapper
• alexhollender_WMF
bwang
cjming
Edtadros
Jdlrobson
• Mabualruz
View All 9 Subscribers

Description

Description

The table of contents is presented as a sidebar by default. It can also be presented as a menu (this happens automatically below 1000px, and there will eventually be a control that allows people to do this manually). This task is about two clicking behavior things.

When the TOC menu is open (at any screen size):

  1. clicking anywhere outside the TOC menu should close it
  2. clicking on a link within the TOC menu should close it (note: this also automatically scrolls you to that section).
    • Example of another menu on our site that works like this (from Recent changes):

Documentation of current behavior

AC

  • Clicking outside of the collapsed TOC button will close it
  • Clicking on a link inside the collapsed TOC menu will close it
  • collapsed TOC menu can be toggled with enter or space button

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
mediawiki.page.ready: Correct function documentation for checkboxmediawiki/coremaster+0 -2
Ensure collapsible TOC is closed when links are clickedmediawiki/skins/Vectormaster+37 -39
mediawiki.page.ready: Add bindDismissOnClickLink to checkboxHack.jsmediawiki/coremaster+28 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

• alexhollender_WMF created this task.Jun 16 2022, 6:31 PM
• alexhollender_WMF removed Edtadros as the assignee of this task.
Jdlrobson assigned this task to bwang.Jun 21 2022, 10:39 PM
bwang added a comment.Jun 23 2022, 8:21 PM

Since the collapsed TOC uses the checkbox hack, this can be accomplished by using JS to progressively enhancing the collapsed TOC. Most of the other checkbox hacks in Vector contain links, so this issue hasn't come up before.

We could potentially make this change in core inside checkboxHack.js, but we'd have to consider how to generalize this to work with other checkbox hack implementations. This feature only makes sense in the context of a dropdown menu (as do some of the other existing enhancements in core like bindDismissOnClickOutside and bindDismissOnFocusLoss). If we do include this in core, we should improve our documentation on when a particular enhancement should be used, or even consider renaming the bind function to be bindDropdown.

Another thing to consider, in this case we only want to close the TOC when links inside a dropdown are clicked, and not the subsection toggle buttons. However I could imagine a dropdown in the future that uses buttons instead of links.

bwang mentioned this in T294165: Vector's dropdown menus do not meet w3's recommended keyboard support.Jun 23 2022, 8:22 PM
bwang removed bwang as the assignee of this task.Jun 23 2022, 9:50 PM
ovasileva triaged this task as Medium priority.Jun 27 2022, 10:34 AM
• alexhollender_WMF renamed this task from Clicking on a link in the TOC menu should close TOC to TOC menu and clicking behavior.Jun 29 2022, 5:54 PM
• alexhollender_WMF updated the task description. (Show Details)
• alexhollender_WMF updated the task description. (Show Details)
ovasileva raised the priority of this task from Medium to High.Jul 1 2022, 2:21 PM
LGoto edited projects, added Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1); removed Web-Team-Backlog-Archived (Kanbanana-FY-2021-22).Jul 5 2022, 5:44 PM
Jdlrobson moved this task from Incoming to Table of Contents on the Vector 2022 board.Jul 6 2022, 4:02 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.Jul 8 2022, 1:39 AM
Jdlrobson lowered the priority of this task from High to Medium.Jul 19 2022, 5:09 PM
LGoto set the point value for this task to 3.Jul 19 2022, 5:27 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.
• alexhollender_WMF added a comment.Jul 21 2022, 5:22 PM

there's a related situation when you click the Beta link when already on the Preferences page:

this seems like an edge case. not sure if it's worth addressing as part of this task...

Jdlrobson added a comment.Jul 21 2022, 5:26 PM

there's a related situation when you click the Beta link when already on the Preferences page:

We just declined this one: T312779

ovasileva raised the priority of this task from Medium to High.Jul 25 2022, 5:29 PM
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.Jul 26 2022, 3:32 PM
bwang claimed this task.Jul 26 2022, 5:17 PM
gerritbot added a comment.Jul 26 2022, 7:03 PM

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

[mediawiki/skins/Vector@master] Ensure collapsible TOC is closed when links are clicked

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

gerritbot added a project: Patch-For-Review.Jul 26 2022, 7:03 PM
bwang removed bwang as the assignee of this task.Jul 26 2022, 7:03 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.
gerritbot added a comment.Jul 26 2022, 8:51 PM

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

[mediawiki/core@master] mediawiki.page.ready: Add bindDismissOnClickLink to checkboxHack.js

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

gerritbot added a comment.Jul 26 2022, 9:08 PM

Change 817348 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.page.ready: Add bindDismissOnClickLink to checkboxHack.js

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.23; 2022-08-01).Jul 26 2022, 10:00 PM
LGoto assigned this task to • Mabualruz.Jul 28 2022, 5:11 PM
gerritbot added a comment.Aug 3 2022, 3:15 AM

Change 817353 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Ensure collapsible TOC is closed when links are clicked

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

Maintenance_bot removed a project: Patch-For-Review.Aug 3 2022, 3:30 AM
ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.25; 2022-08-15); removed MW-1.39-notes (1.39.0-wmf.23; 2022-08-01).Aug 3 2022, 4:00 AM
bwang removed • Mabualruz as the assignee of this task.Aug 3 2022, 4:55 PM
bwang assigned this task to Edtadros.
bwang updated the task description. (Show Details)
bwang moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.
bwang added a subscriber: • Mabualruz.
gerritbot added a comment.Aug 11 2022, 4:22 PM

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

[mediawiki/core@master] mediawiki.page.ready: Correct function documentation for checkbox

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

gerritbot added a project: Patch-For-Review.Aug 11 2022, 4:22 PM
gerritbot added a comment.Aug 11 2022, 5:04 PM

Change 822420 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.page.ready: Correct function documentation for checkbox

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

Maintenance_bot removed a project: Patch-For-Review.Aug 11 2022, 5:29 PM
vaughnwalters moved this task from QA to QA in Prod on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.Aug 17 2022, 9:03 PM
vaughnwalters subscribed.

AC Passes:

  • Clicking outside of the collapsed TOC button will close it
  • Clicking on a link inside the collapsed TOC menu will close it

Screen Recording 2022-08-17 at 3.46.12 PM.mov-14D1ED8F-3E4C-44D0-8F87-35715CF75A4E.gif (456×720 px, 3 MB)

I am tabbing to the element and then testing it with spacebar / enter here:

  • collapsed TOC menu can be toggled with enter or space button

spacebar enter.mov-A32B3834-7CDF-49FE-9122-12FB62173FC2.gif (518×720 px, 456 KB)

PatchDemoBot added a comment.Aug 18 2022, 3:01 PM

Test wiki created on Patch demo by AHollender (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/54ea6fb561/w

• alexhollender_WMF claimed this task.Aug 18 2022, 3:23 PM
• alexhollender_WMF moved this task from QA in Prod to Design Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.

trying to review this on patchdemo but I can't get the ToC to collapse — https://patchdemo.wmflabs.org/wikis/54ea6fb561/wiki/Water?useskin=vector-2022

• alexhollender_WMF reassigned this task from • alexhollender_WMF to ovasileva.Aug 18 2022, 5:08 PM
• alexhollender_WMF moved this task from Design Review to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.

looks great on hebrew:

ovasileva moved this task from Ready for Signoff to QA in Prod on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.Aug 19 2022, 1:10 PM
ovasileva closed this task as Resolved.Aug 29 2022, 8:54 AM

Testing on enwiki.
Clicking outside of the collapsed TOC button will close it - passes
Clicking on a link inside the collapsed TOC menu will close it - passes
collapsed TOC menu can be toggled with enter or space button - passes

Looks good! Resolving.

Jdlrobson removed ovasileva as the assignee of this task.Aug 30 2022, 4:47 PM
Jdlrobson moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q1) board.
vaughnwalters unsubscribed.Aug 30 2022, 4:56 PM
PatchDemoBot added a comment.Feb 3 2023, 3:41 PM

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

https://patchdemo.wmflabs.org/wikis/54ea6fb561/w/

Aklapper mentioned this in T386166: Table of contents should close upon clicking section heading.Feb 12 2025, 7:07 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits