after body page navigation is wrong on some website

[cderv]

We can see this on several website :

I believe they are all deployed on Netlify (to be confirmed)

It is possible this issue comes from problem we have in our after body template.

First we are missing a quote here:

quarto-cli/src/resources/projects/website/templates/nav-after-body-postamble.ejs

Line 7 in c2d85c5

<a href="<%- nav.prevPage.href %>" class="pagination-link aria-label="<%- nav.prevPage.text %>">

Easy fix (dd89c2f - possibly this was the issue in #7319 initially)

other problem : both in line above and in this one

quarto-cli/src/resources/projects/website/templates/nav-after-body-postamble.ejs

Line 16 in c2d85c5

<a href="<%- nav.nextPage.href %>" class="pagination-link" aria-label="<%- nav.nextPage.text %>">

we are inserting in aria-label more than text.

Example from: https://feaz-book.com/introduction

This is the HTML source on github in the repo https://github.com/EmilHvitfeldt/feature-engineering-az/blob/5f5ef5b4c48f502b28e565773f6dcec0f0f39c5c/_book/introduction.html#L1740-L1744

  <div class="nav-page nav-page-next">
      <a href="./numeric.html" class="pagination-link" aria-label="<span class='chapter-number'>1</span>&nbsp; <span class='chapter-title'>Numeric Overview</span>">
        <span class="nav-page-text"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Numeric Overview</span></span> <i class="bi bi-arrow-right-short"></i>
      </a>
  </div>

Note that we have a rather complex aria-label we should not have IMO, which mix ' and ".

This is what we can see in the source page on the deployed website (https://feaz-book.com/introduction with view-source mode in chrome)

  <div class="nav-page nav-page-next">
      <a aria-label='<span class=\'chapter-number\'>1</span>&nbsp; <span class=\'chapter-title\'>Numeric Overview</span>' class='pagination-link' href='/numeric'>
        <span class="nav-page-text"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Numeric Overview</span></span> <i class="bi bi-arrow-right-short"></i>
      </a>
  </div>

So quotes are changed, and mess up a bit, which lead to a bad DOM and the problem of the screenshot.

So something to look into in the sidebar content that gets inner HTML representation with <span> and not just the text without HTML structure.