[Bug]: 7.1 Table of Contents active heading highlight broken

[vmizgiris-equinix]

Describe the bug

When there are subheadings (H3) with the same name under different headings (H2), the highlighting becomes broken, and only subheadings from the first H2 group get highlighted in the TOC as you scroll through the page.

To Reproduce

1. Create a documentation page of a similar format:

## Button

### Properties

Lorem ipsum

### Slots

Lorem ipsum

### Events

Lorem ipsum

## Input

### Properties

Lorem ipsum

### Slots

Lorem ipsum

### Events

Lorem ipsum

## Tooltip

### Properties

Lorem ipsum

### Slots

Lorem ipsum

### Events

Lorem ipsum

2. Add to a Storybook instance and enable TOC
3. Observe TOC links becoming active, only links from the first group "Button" will be highlighted as you scroll past "Input" and "Tooltip"

System

System:
    OS: macOS 13.4.1
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
  Binaries:
    Node: 16.18.1 - ~/Library/Caches/fnm_multishells/66230_1690247671085/bin/node
    npm: 9.7.1 - ~/Library/Caches/fnm_multishells/66230_1690247671085/bin/npm
  Browsers:
    Chrome: 115.0.5790.102
    Edge: 114.0.1823.67
    Safari: 16.5.2
  npmPackages:
    @storybook/addon-a11y: ^7.1.0 => 7.1.0 
    @storybook/addon-essentials: ^7.1.0 => 7.1.0 
    @storybook/addon-links: ^7.1.0 => 7.1.0 
    @storybook/addons: ^7.1.0 => 7.1.0
    @storybook/theming: ^7.1.0 => 7.1.0 
    @storybook/web-components: ^7.1.0 => 7.1.0 
    @storybook/web-components-webpack5: ^7.1.0 => 7.1.0

Additional context

No response

[bijumuhammad]

Hi,id like to help out as this would be a great starting point,though im facing issues while setting up this in local to reproduce the issue, im trying to troubleshoot that,Thank you

[Ihor-Lavrov]

Hi,id like to help out as this would be a great starting point,though im facing issues while setting up this in local to reproduce the issue, im trying to troubleshoot that,Thank you

Hey, how are you doing? Any upd so far?

[bijumuhammad]

Yeah, sorry for the delay will give an update this weekend itself

[divyansh21jain]

@Ihor-Lavrov Please correct me if I am wrong, what i understood is the problem is that only subheadings from the first H2 group are getting highlighted in the TOC as you scroll through the page, right?

To fix this issue, i guess we need to ensure that each subheading (H3) has a unique anchor link assigned to it, even if they have the same name under different H2 headings. One way to achieve this is by appending some unique identifier (e.g., a slug or numerical value) to the anchor link of each subheading.

Hope this might help. Happy to contribute!

[bangank36]

@vmizgiris-equinix Could you provide more info to reproduce the bug? I tried to run the example on this folder /toc, and the toc is scrolled correctly I can't enable the table of content for mdx stories to test, could you advice? Thanks 🙇

---

Update

I managed to test the toc against the given markdown, the reported issue can not be reproduced as I still can see the highlighting works as expected like in the video Though I can see the issue where the TOC is too long and can not be scrolled, as reported here https://github.com/storybookjs/storybook/issues/23542