== Background
See {T306660}
== 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
[x] When the page width is less than 1000px, automatically collapse the table of contents into an icon-button next to the page title
{F35151859}
[x] Clicking the icon-button will open the table of contents
{F35151861}
[x] If both sidebar and ToC are open, the ToC will display under the sidebar (this is how it works currently)
[x] The ToC icon-button in the title is accessible via keyboard ('space' & 'enter' keys will toggle the menu)
[x] The ToC icon-button in the title has correct aria attributes (`aria-haspopup` and `aria-expanded`) and markup consistent with other checkbox hack implementations
[x] 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)
== QA steps
- PatchDemo link - https://patchdemo.wmflabs.org/wikis/9b9fe58d2a/wiki/TestTOC?tableofcontents=1
- Login to PatchDemo instance ( `Alice` or `Bob` + `patchdemo1`) and navigate to `TestTOC` page with TOC query param `?tableofcontents=1`
- Verify that above desktop (1000px) view port, sticky TOC behaves as it does currently on production.
- For the following use cases, see 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)
- 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.