Status labels in docs headings break section links

[jmuzina]

Describe the bug

Our new system for adding status labels in docs pages causes links to docs sections to break. It seems like the status label's text is included in the search for a matching page section, causing navigation to those sections to break.

Consider this heading:

### Dense help text {{ status('updated') }}

This should allow you to navigate to that heading with #dense-help-text. However, you can only navigate to the requested heading by removing the status label.

To Reproduce

Steps to reproduce the behavior:

1. Checkout the repo
2. Find any docs heading that has a {{ status() }} label.
3. Attempt to navigate to it directly by appending the url encoding of the heading to your URL. I.E colour-coding for a "Colour coding" section.
4. See that the requested heading is not scrolled to on page load. You should also see an error in console:

Uncaught TypeError: title is null
    fixScroll http://0.0.0.0:8101/static/js/example.js?v=0134365:485
    resizeInterval http://0.0.0.0:8101/static/js/example.js?v=0134365:369
    setInterval handler*renderIframe http://0.0.0.0:8101/static/js/example.js?v=0134365:365
    renderExample http://0.0.0.0:8101/static/js/example.js?v=0134365:291
    async* http://0.0.0.0:8101/static/js/example.js?v=0134365:81
    <anonymous> http://0.0.0.0:8101/static/js/example.js?v=0134365:80
    EventListener.handleEvent* http://0.0.0.0:8101/static/js/example.js?v=0134365:77
    <anonymous> http://0.0.0.0:8101/static/js/example.js?v=0134365:512
example.js:485:7

5. Remove the status label from the markdown title. Retry navigating to the section.
6. See that the page scrolls to the requested section on load.

Expected behavior

Navigating to a documentation section by using a section name in a hash causes the browser to scroll to that section on load, regardless of status label.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-16070.

This message was autogenerated

[bartaz]

Hmm… it has been addressed in the original PR that introduced these labels.
I wonder if this doesn't work at all, or are there some specific use cases.

That's the part that was updated:

vanilla-framework/templates/static/js/scripts.js

Lines 179 to 187 in c7d7d8d

	document.querySelectorAll('main h2:not([id])').forEach(function (heading) {
	// Only get direct text from h2 node, excluding any child nodes
	var id = heading.childNodes[0].textContent
	.trim()
	.toLowerCase()
	.replaceAll(/\s+/g, '-')
	.replaceAll(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g, '');
	heading.setAttribute('id', id);
	});

[bartaz]

It seems that the JS doesn't even trigger, because anchor ids are generated from Markdown (and label text is taken into account).

For the time being we could use <h2>Heading {{ status_label("New") }}</h2> notation instead, as a workaround.

Another option would be to simply accept the -new (and other) suffixes in URLs and update them when labels are removed from headings.