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

[mediawiki/skins/Vector@master] WIP: Add collapsed TOC to sticky header

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

From conversation with Alex: there's an open question on whether the ToC should stay collapsed once it is collapsed

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

[mediawiki/skins/Vector@master] WIP: Add collapsed TOC to sticky header

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

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

After chatting with @Mabualruz we decided that moving the TOC element instead of duplicating would be simplest, considering Mo's task for rerendering the TOC after edits are made. POC here: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/810402

Change 807219 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] WIP: Add collapsed TOC to sticky header

Reason:

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

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

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

[mediawiki/skins/Vector@master] WIP: Add collapsed TOC to sticky header

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

Change 810402 abandoned by Bernard Wang:

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

Reason:

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

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

In T311103#8052680, @bwang wrote:

After chatting with @Mabualruz we decided that moving the TOC element instead of duplicating would be simplest, considering Mo's task for rerendering the TOC after edits are made. POC here: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/810402

I wanted to note that one major downside of this approach is that moving the TOC rather than copying means that the TOC is no longer accessible to screenreader users when the TOC is collapsed (i.e. when the "hide" button is pressed), and when the sticky header is present. Screenreader users could still navigate using headings, but this is still quite a large impact as we are essentially entirely removing an important page element.

That said, the other solution of copying the TOC also isn't ideal as it complicates T307251 and would require a good amount of JS to be reworked. Another option could be to remove aria-hidden from the sticky header and surface all the duplicate elements to screen readers. The outcomes from T310033 could help us decide between these options.

I'm going to proceed with the approach of moving the TOC in spite of these open questions/issues, but we should revisit this at some point in the future

In T311103#8116245, @bwang wrote:

I wanted to note that one major downside of this approach is that moving the TOC rather than copying means that the TOC is no longer accessible to screenreader users when the TOC is collapsed (i.e. when the "hide" button is pressed), and when the sticky header is present. Screenreader users could still navigate using headings, but this is still quite a large impact as we are essentially entirely removing an important page element.

That said, the other solution of copying the TOC also isn't ideal as it complicates T307251 and would require a good amount of JS to be reworked. Another option could be to remove aria-hidden from the sticky header and surface all the duplicate elements to screen readers. The outcomes from T310033 could help us decide between these options.

I'm going to proceed with the approach of moving the TOC in spite of these open questions/issues, but we should revisit this at some point in the future

I filed T314949 to track these concerns

Change 818218 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add collapsed TOC to sticky header by moving the TOC

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

For the following acceptance criteria:

• The table of contents icon (mw-toc-button) should be marked with the mw-sticky-header-element class

The table of contents icon in the sticky header does not contain the class mw-sticky-header-element. mw-sticky-header-element does appear on the TOC icon (as seen in the screenshot), but not in the sticky header. Is this expected?

the language button seems to be wrapping now if the page has a long title:

example article

current	expected/correct

In T311103#8179761, @alexhollender_WMF wrote:

the language button seems to be wrapping now if the page has a long title:

example article

What would be expected here? A longer breakpoint maybe for the sticky header disappearing?

@ovasileva I've updated my comment with an additional screenshot to clarify. the language button shouldn't wrap like that, rather the article title should take up less space.

In T311103#8163807, @vaughnwalters wrote:

For the following acceptance criteria:

• The table of contents icon (mw-toc-button) should be marked with the mw-sticky-header-element class

The table of contents icon in the sticky header does not contain the class mw-sticky-header-element. mw-sticky-header-element does appear on the TOC icon (as seen in the screenshot), but not in the sticky header. Is this expected?

Sorry for the late response, i’m not sure what that AC is for or why it was added, as far as I can tell the sticky header toc doesn’t need that class. I believe we can remove that AC

In T311103#8179761, @alexhollender_WMF wrote:

the language button seems to be wrapping now if the page has a long title:

example article

current	expected/correct

Should we file a new task for this? Seems like an existing bug/regression

@bwang thanks for following up about this. When I left that comment I was thinking of it more as "this hasn't passed design review", but now I see that this change has already been deployed.
I just created T316609: Buttons in sticky header should never wrap.