tech-docs-gem icon indicating copy to clipboard operation
tech-docs-gem copied to clipboard

Bug: Link in navigation point to the right ID when a heading is shared between two pages

Open romaricpascal opened this issue 1 year ago • 1 comments

What should change

The computation of unique IDs for the links in the navigation gives the wrong results when:

  • two pages share a common heading
  • you're on one of these two pages
  • the navigation has a link to the other page pointing to the shared heading

The link points to an ID composed of the heading and the previous heading (for ex. /javascript-api-reference/#javascript-api-reference-button), as if the target was on the current page. It should instead be only the heading (in the example /javascript-api-reference/#button) as on the other page, the ID is unique.

To reproduce:

  • checkout this commit of govuk-frontend-docs (dd1d088), - npm install,
  • bundle install
  • bundle exec middleman server
  • Navigate to "Sass API Reference"
  • Expand the menu item for "JavaScript API Reference"
  • The "Button" link will point to #javascript-api-reference-button, while when browsing the other pages, it points to #button

User need

When publishing the latest release of the design system, we had our JavaScript API Reference and Sass API Reference both list the Button component, leading to the issue described. A situation that may happen further as both docs get expanded and list the options for our components. Other documentations with repetitive structure/content across pages may run into this issue as well.

romaricpascal avatar Nov 14 '22 15:11 romaricpascal