Code recommendation for numbered endnotes

Hi there,

We are revising our internal numbered endnote specification for EPUB based on accessibility needs, and we have come to two possible solutions, but we aren’t sure which one is best in practice.
Solution 1: Use ARIA roles and directly link endnote number

Visual example:

[https://jira.penguinrandomhouse.com/plugins/servlet/jeditor_file_provider?imgId=ckupload202105125039456714292383660&fileName=Screen+Shot+2021-05-12+at+9.38.06+AM.jpg][data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D]
Code example:
      <div role="doc-endnotes">
        <h1>Notes</h1>
        <h2 class="head">Endnote Section Heading</h2>
        <div class="endnotes" role="list">
          <div id="endnote-1" role="listitem">
            <p class="endnote"><span class="endnote"><a href="#endnote-ref-1" role="doc-backlink" title="note reference">1.</a></span> Reference content. <a href="www.google.com">External link</a>.</p>
          </div>
          <div id="endnote-2" role="listitem">
            <p class="endnote"><span class="endnote"><a href="#endnote-ref-2" role="doc-backlink" title="note reference">2.</a></span> Reference content.</p>
            <p class="endnote_con">Additional paragraph with indent. Continues for a few lines. May be followed by more paragraphs.</p>
          </div>
          ...
        </div>
      </div>

Solution 2: Use <ol> with additional reciprocal links

Visual example:

[https://jira.penguinrandomhouse.com/plugins/servlet/jeditor_file_provider?imgId=ckupload202105128476232070403354273&fileName=Screen+Shot+2021-05-12+at+9.35.42+AM.jpg][data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D]
Code example:
      <div role="doc-endnotes">
        <h1>Notes</h1>
        <h2 class="head">Endnote Section Heading</h2>
        <ol class="endnotes">
          <li id="endnote-1" class="endnote">
            <p class="endnote">Reference content. <a href="www.google.com">External link</a>. <a href="#endnote-ref-1" role="doc-backlink">Back to note reference 1</a>.</p>
          </li>
          <li id="endnote-2" class="endnote">
            <p class="endnote">Reference content. <a href="#endnote-ref-2" role="doc-backlink">Back to note reference 2</a>.</p>
            <p class="endnote_con">Additional paragraph with indent. Continues for a few lines. May be followed by more paragraphs.</p>
          </li>
          ...
        </ol>
      </div>
Endnote Reference, Code Example
...<a id="endnote-ref-1" class="endnote" href="notes.xhtml#endnote-1" role="doc-noteref">1</a>...

Is there a functional preference for either of these code practices? Also, should doc-footnote be used for individual endnotes?

Thanks,
Alex