Gatsby: Link elements do not follow anchors when these are accentuated

[kuworking]

If in a mdx file I have something like

# This is my áccentuated title

and later I grab the tableOfContents through graphQL, I can see that tableOfContents.items[].node.url and the id property passed to the h1 node has the accent

id="This-is-my-áccentuated-title"

The link you can recreate with "to="mywebpage#This-is-my-áccentuated-title" doesn't go to the anchor because of the accent (at least what I'm seeing in Chrome)

One easy workaround would be to just remove accents when creating the id names, but AFAIK it cannot be done by the user (?)

[kuworking]

Closed in favour of https://github.com/remarkjs/remark-slug/issues/12

[kuworking]

Reopened again, from https://github.com/remarkjs/remark-slug/issues/12

Here there is a minimal repo

https://github.com/kuworking/link_anchors_accents

The <Link> element doesn't seem to work with an accentuated anchor (or at least that's what I see)

    <h1 id="test">no accent</h1>
    <h1 id="tést">yes accent</h1>

    <p>
      <Link to="/page-2#test">Go to page 2, no accent, works</Link>
    </p>
    <p>
      <Link to="/page-2#tést">Go to page 2, yes accent, doesn't follow the anchor</Link>
    </p>

[blainekasten]

@kuworking Thanks for reporting. I spent some time yesterday looking into this and have absolutely reproduced it.

To document my findings here is a few things:

In a native HTML page

• Clicking an accented id scrolled to the matching id
• Reloading restored previous pages scroll position (meaning it did not care about the #id match)

In Gatsby

• Clicking an accented id within a page scrolls to it properly
• Navigating to a new page with the accented id does not scroll to it, we jump to the top of the page

I haven't identified yet if this is a Gatsby problem, or with @reach/router, but there is definitely an inconsistency here and we'd like to align with the platform.

[blainekasten]

I figured out what the problem is, the browser encodes the hash, so when we try to compare the hash to the id in the page they do not match. Browsers must internally decode that hash, but we currently don't.

I know how to fix this now, just need to figure out if we should fix this in gatsby, or if it should be fixed in @reach/router. But making progress!

[kuworking]

What can I say, apart from thanks a lot 👏👏👏👏👏

[blainekasten]

Fixed in latest!