2024-12-17: TOC links to alert headings don't work

[AnitaYCheng]

Expected behavior

Clicking on a TOC link in the sidebar should take the user to the correct heading.

Current behavior

Headings in alert boxes are populated in the TOC sidebar because they're h3, as expected. But when clicked on, the screen scrolls to the top of the page instead of to the alert heading.

Possible solutions

I suspect this is because on all the other headings, it's the heading tag that has the ID attached to it.

But for the alert, it's an empty a tag that has the ID attached to it.

I looked at alert.js but wasn't sure how to move that ID assignment. Probably need a real dev on this. 😅

Steps to reproduce (for bugs)

Example with 2 alerts

Context

No response

Your environment

No response

[mgwalker]

This appears to be because the alert shortcode produces HTML so it's not being run through the markdown-it-attrs parser that handles correctly inserting heading links. Though I'm genuinely unsure where the heck the anchor tags are coming from – nowhere in the code seems to be creating them. 🤔

Scratch that. Something in inserting anchor elements into the headings, and doing weird stuff to the scrolling. I suspect USWDS is at play in here.

[mgwalker]

This is a USWDS bug. Tracking in uswds/uswds#6295