Bug: s-page breadcrumb shows broken when page heading and link text is same

Polaris
1

Hi,

I noticed that when you set the text inside s-link, which is in the breadcrumb-actions slot of a s-page, same as the heading of the s-page, and click the link, the breadcrumb of the back page displays broken.

To reproduce, create two routes:

app.a.jsx:

export default function A() {
  return (
    <s-page heading="A">
      <s-link slot="breadcrumb-actions" href="/app">
        App
      </s-link>
    </s-page>
  );
}

app.x.jsx:

// same page heading and link text
export default function X() {
  return (
    <s-page heading="X">
      <s-link slot="breadcrumb-actions" href="/app/a">
        X
      </s-link>
    </s-page>
  );
}

When you navigate to /app/x, the breadcrumb correctly shows X > X:

image

But when you click the back link in the breadcrumb, the breadcrumb in /app/a should show App > A, but it shows like below:

image

However, if you make the link text different from the page heading:

export default function X() {
  return (
    <s-page heading="X">
      <s-link slot="breadcrumb-actions" href="/app/a">
        Y
      </s-link>
    </s-page>
  );
}

image

and click the back link, the breadcrumb shows correctly:

image