Collapse ToC into page title at narrow screens
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	ovasileva
	May 9 2022, 10:23 AM

Description

Background

See T306660: [Goal] Table of contents on narrow screens in vector-2022

Description

This is the first of two tickets that will provide collapsible behavior for the table of contents. The first part (this ticket) will allow the ToC to automatically collapse into a button next to the page title for narrow screens (below 1000px). The second part will allow the ToC to be collapsed manually at any screen sizes.

Design & prototype

https://di-collapsible-menus.web.app/Brown_bear

Acceptance criteria

When the page width is less than 1000px, automatically collapse the table of contents into an icon-button next to the page title
Clicking the icon-button will open the table of contents
If both sidebar and ToC are open, the ToC will display under the sidebar (this is how it works currently)
The ToC icon-button in the title is accessible via keyboard ('space' & 'enter' keys will toggle the menu)
The ToC icon-button in the title has correct aria attributes (aria-haspopup and aria-expanded) and markup consistent with other checkbox hack implementations
After the ToC icon-button in the title opens the menu, the menu is accessible as the next element for screen readers and keyboard users (i.e. tab) << to be addressed in follow up

QA steps

Beta cluster link TK
Verify that above desktop (1000px) view port, sticky TOC behaves as it does currently on production.
For the following use cases, see 1st 2 screenshots in T307900#7958897 :
- Between tablet (720px) and desktop (1000px) view ports:
  - Verify that the collapsible TOC icon renders next to the page title when at the top of the page when the sidebar menu is open.
  - Verify that the collapsible TOC icon renders next to the page title when at the top of the page when the sidebar menu is closed.
  - Verify that clicking on the collapsible TOC icon next to page title opens the TOC as an overlay
  - Verify that clicking on a TOC section navigates the user to that section ~~with the collapsed TOC icon sticky in the sidebar (for both sidebar menu expanded/collapsed states)~~ will be addressed in T308689
  - Verify that the collapsible TOC icon is navigable via keyboard tabs:
    - Tabbing to TOC icon and hitting "Enter" will toggle the TOC open/closed
    - ~~Tabbing to TOC icon, hitting "Enter" to open TOC, then tabbing to TOC section navigates user to that section.~~
- Below tablet (720px) view port:
  - Verify above steps but note that sidebar menu collapses full width above main content so there is no expanded sidebar container state for the expanded/collapsed TOC.
- Repeat above steps for the no-js context - note that the TOC headings will not be collapsed.
- Cross-check in other supported browsers.

QA Results - Beta

AC	Status	Details
1	✅	T307900#8027898
2	✅	T307900#8027898
3	✅	T307900#8027898
4	✅	T307900#8027898
5	✅	T307900#8027898
6	✅	T307900#8027898
7	✅	T307900#8027898
8	✅	T307900#8027898
9	✅	T307900#8027898

QA Results - Prod

AC	Status	Details
1	✅	T307900#8046816
2	✅	T307900#8046816
3	✅	T307900#8046816
4	✅	T307900#8046816
5	✅	T307900#8046816
6	✅	T307900#8046816
7	✅	T307900#8046816
8	✅	T307900#8046816
9	✅	T307900#8046816

Details

Subject	Repo	Branch	Lines +/-
Collapse ToC into page title at narrow view ports with CSS/template changes only	mediawiki/skins/Vector	master	+110 -3
Table of contents: Cached HTML is no longer a problem	mediawiki/skins/Vector	master	+1 -4
Cached CSS is no longer a problem	mediawiki/skins/Vector	master	+1 -2
POC: Collapse ToC into page title at narrow view ports by duplicating TOC	mediawiki/skins/Vector	master	+161 -102
Minor adjustments to collapsible TOC	mediawiki/skins/Vector	master	+8 -12
Disable table of contents toggle on VE activation	mediawiki/skins/Vector	master	+16 -0
POC:Collapse ToC into page title at narrow view ports	mediawiki/skins/Vector	master	+50 -5

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T273473 [Epic] Improve the table of contents
Resolved	Jdlrobson	T309972 [Goal] prepare desktop improvements project for further deployment
Resolved	ovasileva	T306660 [Goal] Table of contents on narrow screens in vector-2022
Resolved	ovasileva	T307900 Collapse ToC into page title at narrow screens
Resolved	None	T310828 TOC menu and clicking behavior

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Jdlrobson mentioned this in T309632: ToC disappearing at narrow widths during A/B test run.Jun 1 2022, 9:02 PM

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Jun 1 2022, 10:27 PM

cjming claimed this task.Jun 2 2022, 5:03 PM

cjming moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson merged a task: T309632: ToC disappearing at narrow widths during A/B test run.Jun 2 2022, 6:26 PM

hi @Jdlrobson cc @bwang -- thanks for the code review -- I met with Bernard to pick his brain about the accessibility and positioning issues around the new TOC icon. Based on that convo, I'm inclined with Bernard's advice to duplicate the TOC (option 1 from T307900#7921695) and try to leverage existing dropdown menu styles given the fragile CSS needed to position the button. Doing this will hopefully make CSS less brittle/error-prone and keep collapsible TOC keyboard accessible.

Do you have any concerns around that before I dive into refactoring the current patch?

Also adding this and sidebar main menu accessibility on SHDT agenda to discuss how we want to approach since it will continue to be an issue if/when we pursue floating main menu.

@cjming I just chatted with @Jdlrobson, and it sounds like we should go with the simplest solution for now in the interest of unblocking the TOC, i.e. going with your original approach of styling the original TOC element, and also adding an a button element before the h1. Jon also mentioned concerns about the duplicated ids, and that there might be a point later on where we can think of a better solution, i.e. using JS to move elements to the right location when needed.

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

[mediawiki/skins/Vector@master] Collapse ToC into page title at narrow view ports

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

cjming removed cjming as the assignee of this task.Jun 8 2022, 12:41 AM

cjming assigned this task to bwang.

cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

cjming claimed this task.Jun 8 2022, 3:28 PM

cjming moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 803580 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC:Collapse ToC into page title at narrow view ports

Reason:

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

Change 794029 abandoned by Clare Ming:

[mediawiki/skins/Vector@master] Collapse ToC into page title at narrow view ports

Reason:

in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/803941

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

Maintenance_bot removed a project: Patch-For-Review.Jun 10 2022, 4:30 PM

cjming reassigned this task from cjming to bwang.Jun 10 2022, 5:07 PM

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

[mediawiki/skins/Vector@master] Collapse ToC into page title at narrow view ports with CSS/template changes only

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

gerritbot added a project: Patch-For-Review.Jun 10 2022, 5:36 PM

Quiddity unsubscribed.Jun 10 2022, 8:28 PM

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

[mediawiki/skins/Vector@master] Cached CSS is no longer a problem

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

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

[mediawiki/skins/Vector@master] Cached HTML is no longer a problem

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

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

[mediawiki/skins/Vector@master] Disable table of contents toggle on VE activation

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

cjming reassigned this task from bwang to Edtadros.Jun 10 2022, 10:10 PM

cjming moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson moved this task from QA to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Jun 10 2022, 10:21 PM

Change 803941 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Collapse ToC into page title at narrow view ports with CSS/template changes only

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

Alex this will be available shortly on the beta cluster. Please remember this is iterative so not complete work (the work to make it sticky for example is T308689). The current state is primarily an interim state to make sure there's some kind of access for narrow screens.

When done please move back to "doing" and unassign as we still have some work to do around accessibility.

cjming reassigned this task from • alexhollender_WMF to Edtadros.Jun 10 2022, 10:23 PM

cjming updated the task description. (Show Details)

Jdlrobson reassigned this task from Edtadros to • alexhollender_WMF.Jun 10 2022, 10:25 PM

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.16; 2022-06-13).Jun 10 2022, 11:00 PM

cjming updated the task description. (Show Details)Jun 10 2022, 11:05 PM

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

~~https://patchdemo.wmflabs.org/wikis/9b9fe58d2a/w/~~

Change 804656 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Disable table of contents toggle on VE activation

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

this is looking great. two small things:

could we offset the icon by ~10px so that the edge of it lines up with the edge of the container (when it isn't being hovered)?

current	offset

is it possible that when you click on a link the TOC menu/panel closes? currently it seems to stay open, so if you scroll back up to the top of the page after clicking on something you find it open:

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

[mediawiki/skins/Vector@master] Add support for floating TOC lower down the page

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

hi @alexhollender_WMF

In T307900#7999651, @alexhollender_WMF wrote:

this is looking great. two small things:

could we offset the icon by ~10px so that the edge of it lines up with the edge of the container (when it isn't being hovered)?

Sure - does that mean that you still want the TOC itself to vertically align with the edge of the icon on hover?

i.e. current

Screen Shot 2022-06-13 at 3.53.19 PM.png (1×1 px, 254 KB)

margin-left: -10px

Screen Shot 2022-06-13 at 3.53.03 PM.png (770×1 px, 156 KB)

is it possible that when you click on a link the TOC menu/panel closes? currently it seems to stay open, so if you scroll back up to the top of the page after clicking on something you find it open:

I need to dig into this -- I have a feeling this is on the complex side because current behavior is that when you click on a section, it brings you to that section (above desktop) with the TOC open. We want to preserve this behavior presumably above desktop but change it below desktop by checking view port and scroll position. I'm also unclear how we could make this work for no-js context.

Do you want TOC to automatically close when jumping to a section at all view ports below desktop regardless of scroll position?

@cjming

thanks for asking about that detail. the menu should still be aligned with the button as it is currently:

default	hover	clicked

also you'll notice that i've added a small gap between the outline of the icon and the title so they are not touching as they are currently:

Screen Shot 2022-06-14 at 10.47.29 AM.png (77×99 px, 2 KB)

the way i'm thinking about it is: if we're presenting the TOC in a menu/panel (which currently only happens below 1000px, but eventually will be possible even at larger screens), it should act as other menus do in the sense that if you open it up, then click on an item, the menu automatically closes. does that make sense? i don't think it's a high priority, so if it's complex we can definitely create a separate ticket and worry about it down the road.

thanks for the clarifications @alexhollender_WMF

In T307900#8002882, @alexhollender_WMF wrote:

the way i'm thinking about it is: if we're presenting the TOC in a menu/panel (which currently only happens below 1000px, but eventually will be possible even at larger screens), it should act as other menus do in the sense that if you open it up, then click on an item, the menu automatically closes. does that make sense? i don't think it's a high priority, so if it's complex we can definitely create a separate ticket and worry about it down the road.

Makes sense -- it's more how things need to work in the interim state (i.e. until T307901 is completed wherein the collapsible TOC will be made available at all view ports) - the complexity lies in differentiating between above and below desktop, as well as between the js/no-js contexts. It might be worth separating that task out into its own (I haven't dug deep into what it would take to accomplish this) - but maybe/hopefully it will only be a temporary issue if T307901 gets resolved sooner than later.

cc @bwang -- maybe you have some thoughts about this?

Change 805411 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Minor adjustments to collapsible TOC

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

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

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

~~https://patchdemo.wmflabs.org/wikis/0f9ca956ca/w/~~

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

hi @alexhollender_WMF I added a patch demo link to see if I got the minor adjustments right - please look at https://patchdemo.wmflabs.org/wikis/423b7cbf7c/wiki/Barack_Obama?useskin=vector-2022&tableofcontents=1 below desktop

When comparing to prototype, some of the vertical alignments seem slighty askew - is this ok?

protoype - note that the TOC vertically aligns with content

Screen Shot 2022-06-14 at 9.50.43 AM.png (1×1 px, 331 KB)

patchdemo with sidebar main menu nav closed

Screen Shot 2022-06-14 at 10.00.31 AM.png (1×1 px, 466 KB)

patchdemo with sidebar main menu nav open -- slight more noticeable

Screen Shot 2022-06-14 at 10.00.39 AM.png (1×1 px, 922 KB)

lmk if anything else needs adjusting re: your 1st feedback comment in T307900#7999651

cjming assigned this task to • alexhollender_WMF.Jun 14 2022, 4:09 PM

cjming moved this task from Doing to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

@cjming thanks for the detailed comparison with the prototype — much appreciated. the patchdemo looks great all around. the only other change is adding a 4px gap between the icon and the page title:

current	updated

cjming removed • alexhollender_WMF as the assignee of this task.Jun 14 2022, 4:29 PM

cjming assigned this task to bwang.

cjming moved this task from Design Review to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

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

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

~~https://patchdemo.wmflabs.org/wikis/2512e6ce25/w/~~

AlexisJazz unsubscribed.Jun 14 2022, 8:03 PM

bwang reassigned this task from bwang to cjming.Jun 14 2022, 9:00 PM

bwang moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

@alexhollender_WMF do you mind confirming if there should be a little space vertically between the TOC icon and the TOC like in the prototype?
Fwiw I think all the other dropdowns are flush -- tho the prototype looks like there's a little vertical space between them (looking at the user menu for example)

We had it flush between the hover state background border of the icon and the TOC but I might have misinterpreted your comment about having breathing room horizontally (between icon + title) vs vertically (between icon + toc)

Screen Shot 2022-06-14 at 3.09.01 PM.png (612×658 px, 81 KB)

In T307900#8002882, @alexhollender_WMF wrote:

the way i'm thinking about it is: if we're presenting the TOC in a menu/panel (which currently only happens below 1000px, but eventually will be possible even at larger screens), it should act as other menus do in the sense that if you open it up, then click on an item, the menu automatically closes. does that make sense? i don't think it's a high priority, so if it's complex we can definitely create a separate ticket and worry about it down the road.

@cjming @alexhollender_WMF I think this is doable, my personal preference is for it to be tracked in a new task. I believe the TOC menu behaves differently because every other menu item is a link to a different page, which automatically closes the menu. TOC menu items stay on the same page, so we'd need some extra JS to handle this.

In T307900#8004132, @cjming wrote:

@alexhollender_WMF do you mind confirming if there should be a little space vertically between the TOC icon and the TOC like in the prototype?
Fwiw I think all the other dropdowns are flush -- tho the prototype looks like there's a little vertical space between them (looking at the user menu for example)

ah, my bad for not noticing that had changed. flush sounds good:

Change 805411 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Minor adjustments to collapsible TOC

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.17; 2022-06-20); removed MW-1.39-notes (1.39.0-wmf.16; 2022-06-13).Jun 15 2022, 4:00 PM

Change 794029 restored by Bernard Wang:

[mediawiki/skins/Vector@master] Collapse ToC into page title at narrow view ports

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

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

cjming reassigned this task from cjming to Edtadros.Jun 15 2022, 10:45 PM

cjming moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 794029 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Collapse ToC into page title at narrow view ports by duplicating TOC

Reason:

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

bwang mentioned this in T310810: Collapsible TOC button missing accessible label.Jun 16 2022, 3:27 PM

Change 804652 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Cached CSS is no longer a problem

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

Change 804653 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Table of contents: Cached HTML is no longer a problem

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

Change 807603 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Restore sticky header class

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.18; 2022-06-27); removed MW-1.39-notes (1.39.0-wmf.17; 2022-06-20).Jun 22 2022, 7:00 PM

bwang mentioned this in T311259: Add collapsible TOC and TOC + sticky header cases to Pixel.Jun 23 2022, 4:52 PM

Test Result - Beta

Status: ❌ ✅ Pass (per T307900#8033620)
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Beta cluster link TK
✅ AC1: Verify that above desktop (1000px) view port, sticky TOC behaves as it does currently on production.
- Verified with sidebar collapsed, expanded, scrolling toc, non-scrolling toc, section "highlighting", clicking items, and expanding/collapsing sections, and visual similarity to Prod.
For the following use cases, see 1st 2 screenshots in T307900#7958897 :
- Between tablet (720px) and desktop (1000px) view ports:
  - ✅ AC2: Verify that the collapsible TOC icon renders next to the page title when at the top of the page when the sidebar menu is open.
  - ✅ AC3: Verify that the collapsible TOC icon renders next to the page title when at the top of the page when the sidebar menu is closed.
  - ❌ AC4: Verify that clicking on the collapsible TOC icon next to page title opens the TOC as an overlay
    - The TOC does open as an overlay, but the button stays above the overlay and blocks a section. Additionally it covers a section of the TOC border.
  - ✅ AC5: Verify that clicking on a TOC section navigates the user to that section ~~with the collapsed TOC icon sticky in the sidebar (for both sidebar menu expanded/collapsed states)~~ will be addressed in T308689
  - Verify that the collapsible TOC icon is navigable via keyboard tabs:
    - ✅ AC6: Tabbing to TOC icon and hitting "Enter" will toggle the TOC open/closed{F35278121}
    - ~~Tabbing to TOC icon, hitting "Enter" to open TOC, then tabbing to TOC section navigates user to that section.~~
- Below tablet (720px) view port:
  - ✅ AC7: Verify above steps but note that sidebar menu collapses full width above main content so there is no expanded sidebar container state for the expanded/collapsed TOC.
- ❌ AC8: Repeat above steps for the no-js context - note that the TOC headings will not be collapsed.

>1000px	<1000 >720	<720
✅ also validated scroll bar, not shown below	❌ Button stays in place, has the same issue with the boder, Doesn't Expand/Collapse with keyboard. Scroll bar functions.	✅ also validated scroll bar, not shown below

✅ AC9 Cross-check in other supported browsers. -Validated safari and firefox

Jdlrobson reassigned this task from Jdlrobson to bwang.Jun 27 2022, 7:23 PM

Those results look expected. The issue with the menu placement is tracked here: T311178, although it will likely be fixed by T311447

Jdlrobson moved this task from Needs More Work to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Jun 28 2022, 5:17 PM

Edtadros claimed this task.Jun 28 2022, 5:19 PM

Test Result - Prod

Status: ✅ Pass (see note below)
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Beta cluster link TK
✅ AC1: Verify that above desktop (1000px) view port, sticky TOC behaves as it does currently on production.
- Verified with sidebar collapsed, expanded, scrolling toc, non-scrolling toc, section "highlighting", clicking items, and expanding/collapsing sections, and visual similarity to Prod.
For the following use cases, see 1st 2 screenshots in T307900#7958897 :
- Between tablet (720px) and desktop (1000px) view ports:
  - ✅ AC2: Verify that the collapsible TOC icon renders next to the page title when at the top of the page when the sidebar menu is open.
  - ✅ AC3: Verify that the collapsible TOC icon renders next to the page title when at the top of the page when the sidebar menu is closed.
  - ✅ AC4: Verify that clicking on the collapsible TOC icon next to page title opens the TOC as an overlay
    - The TOC does open as an overlay, but the button stays above the overlay and blocks a section. Additionally it covers a section of the TOC border.
  - ✅ AC5: Verify that clicking on a TOC section navigates the user to that section ~~with the collapsed TOC icon sticky in the sidebar (for both sidebar menu expanded/collapsed states)~~ will be addressed in T308689
  - Verify that the collapsible TOC icon is navigable via keyboard tabs:
    - ✅ AC6: Tabbing to TOC icon and hitting "Enter" will toggle the TOC open/closed
    - ~~Tabbing to TOC icon, hitting "Enter" to open TOC, then tabbing to TOC section navigates user to that section.~~
- Below tablet (720px) view port:
  - ✅ AC7: Verify above steps but note that sidebar menu collapses full width above main content so there is no expanded sidebar container state for the expanded/collapsed TOC.
- ❌ AC8: Repeat above steps for the no-js context - note that the TOC headings will not be collapsed.

>1000px	<1000 >720	<720
✅	❌ Cannot open TOC with keyboard	❌ Cannot open TOC with keyboard

✅ AC9 Cross-check in other supported browsers. -Validated safari and firefox

NOTE: @ovasileva, the opening/closing of the TOC with JS turned off is the only error I found. Per T307900#8033620 this is a pass. I just wanted to highlight that before you signed this one off. I kept the ❌ next to them for that reason.

Edtadros updated the task description. (Show Details)Jul 3 2022, 4:50 AM

Thanks @Edtadros. @alexhollender_WMF - do you know if we have a task for keyboard support here? If not, I can go ahead and set one up

In T307900#8047801, @ovasileva wrote:

Thanks @Edtadros. @alexhollender_WMF - do you know if we have a task for keyboard support here? If not, I can go ahead and set one up

I am not aware of one

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

[mediawiki/skins/Vector@master] POC move TOC to sticky header

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

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

~~https://patchdemo.wmflabs.org/wikis/747ae75d6e/w/~~

ovasileva closed subtask T310828: TOC menu and clicking behavior as Resolved.Aug 29 2022, 8:54 AM

bwang mentioned this in T318013: [M] [Screenreader & Keyboard UX] Improve accessibility of collapsed TOC in header/floating cases for JS users .Sep 16 2022, 7:39 PM

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

~~https://patchdemo.wmflabs.org/wikis/423b7cbf7c/w/~~

	F35298003: Screen Recording 2022-07-02 at 9.04.05 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35298010: Screen Recording 2022-07-02 at 9.06.27 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35298018: Screen Recording 2022-07-02 at 9.08.39 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35297986: Screen Recording 2022-07-02 at 9.00.32 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35297978: Screen Recording 2022-07-02 at 8.57.49 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35297974: Screen Recording 2022-07-02 at 8.54.24 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35297971: Screen Recording 2022-07-02 at 8.53.20 PM.mov.gif
	Jul 3 2022, 4:48 AM

	F35297969: Screen Shot 2022-07-02 at 8.52.49 PM.png
	Jul 3 2022, 4:48 AM

Collapse ToC into page title at narrow screensClosed, ResolvedPublic5 Estimated Story PointsActions

Description

Background

Description

Design & prototype

Acceptance criteria

QA steps

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Collapse ToC into page title at narrow screens
Closed, ResolvedPublic5 Estimated Story Points
Actions

Related Objects
Search...