Table of Contents menu shows links to headings within a collapsed <details>

[JoshuaKGoldberg]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The generated tables of contents (ToC) for a markdown page includes headings inside collapsed <details>. Clicking the ToC link does nothing.

This was mentioned back in #5790. I haven't found anything in the [HTML5 spec](https://html.spec.whatwg.org/#the-details-element section on <details>) about disallowing heading content inside it. Some online sites such as https://a11ysupport.io/tech/html/summary_element reference them being allowed. https://stackoverflow.com/questions/49594772/should-i-specify-h2-h6-sub-headings-for-a-details-tag-to-make-the-details-a-dist#:~:text=Headings%20within%20details,)%2C%20provide%20heading%20elements%20within even references it being preferred (though I again can't find a source).

See the typescript-eslint site and PR referenced in this issue for an example of where I'd want this. Specifically, I wanted to include headings inside a details view because there's a lot of content that could benefit from having sections. The details content isn't something most page readers need, though, so I didn't want to have the reading journey on the page include it so early.

member-ordering._.TypeScript.ESLint.-.Google.Chrome.2022-04-29.09-11-02.mp4

Reproducible demo

https://j2rm6f.sse.codesandbox.io/markdown-page

Steps to reproduce

1. Add a <details> element to a markdown page
2. Include a ## ... heading inside that details element
3. View the markdown page

Expected behavior

I would think one of the two would happen:

• Clicking the ToC heading would expand the <details> element
• The ToC doesn't show headings inside collapsed <details>

#5790 is related

Actual behavior

The ToC includes headings inside collapsed <details>. Clicking the ToC link does nothing.

Your environment

• Public source code: docs: overhauled member-ordering docs and types typescript-eslint/typescript-eslint#4873
• Public site URL: https://deploy-preview-4873--typescript-eslint.netlify.app/rules/member-ordering
• Docusaurus version used: 2.0.0-beta.18
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 100, Node.js 14/16
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): N/A

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Duplicate of #7165

[Josh-Cena]

So

1. This is working as intended because the TOC algorithm doesn't really know what's containing each heading node (because the MDAST doesn't encode this info)
2. You shouldn't put structural content in details
3. As a workaround, you can use JSX tags like <h2>Heading</h2> which will be ignored by the TOC algorithm
4. You may want to watch out for Ergonomic way to enhance ToC within Markdown: insert TOC slice, exclude headings #6201

[JoshuaKGoldberg]

Aha, I missed that one - sorry for the dup, and thanks for the quick answer!

[Josh-Cena]

No problem, that one was worded a bit differently so it's hard to search...