Initial usability study results indicated poor discovery of the TOC from the header button.

Matthias's theory is as follows:

I think the main issue with the sticky header discoverability right now is that it doesn’t look like an interactive element. It blends in (too) well with the rest of the page, and while it has a “button” to open the TOC, it is not obvious that it is an interactive element and can easily be mistaken for being nothing more than illustrative.

And we can improve that through:

• making it so that that whole header area can be clicked to toggle the TOC
• setting it apart more from the content (full-length border with some shadow for depth perception), making it slightly more obvious that it’s potentially <more than purely visual>
• adding the border around that icon, making it more obvious that it’s a button that can be clicked

Design update from Justin:

If we use a neutral-normal button for the ToC and add a box-shadow-large effect in addition to a muted border beneath the header, it's way more visible.

Here's an existing patch over which we discussed these changes; it does most of the work already, but needs (at least) some styling changes: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1238301

Slack thread here

Acceptance criteria

• The TOC button/icon has a frame
• The whole header is clickable
  • Ensure that this doesn't break the TOC button (i.e. doesn't record 2 actions when clicking there)
  • Ensure that this doesn't break the edit button (i.e. clicking that spot of the header should still bring you to edit, not open TOC)
• Sticky header looks exactly like attached design, with a full-length border/shadow