Some links have empty names for assistive technologies and are therefore problematic for accessibility and also search engines

I love Rive and just wanted to make it even better - and especially more accessible. Some links have accessible names but some don't. This is a huge problem for many, especially blind screen-reader users and also search engines.

Example on https://rive.app - first, main call to action button "Get Started" that has the rocket animation on mouse hover.

When I check the generated HTML I get:

<div class="framer-1sl7iyo-container">
  <div data-framer-generated="true" class="framer-shBnO framer-v-hzrkcv" style="display:contents" tabindex="0">
    <div id="rocket-link">
      <!-- -->
      <div class="framer-hzrkcv" data-framer-name="GetStartedRocket" style="opacity: 1;">
        <div class="framer-1h19a31-container" style="opacity: 1;">
          <div class="" style="width:100%;height:100%"><canvas style="vertical-align: top; width: 500px; height: 500px;" width="500" height="500"></canvas></div>
        </div><a class="framer-11k26ej framer-17ln1yw" data-framer-name="Mouse Enter" data-highlight="true" href="https://editor.rive.app/" rel="noreferrer noopener" data-projection-id="85" style="opacity: 1;"></a>
      </div>
    </div>
  </div>
</div>

The semantic part that is important for accessibility tree is the anchor part:
<a class="framer-11k26ej framer-17ln1yw" data-framer-name="Mouse Enter" data-highlight="true" href="https://editor.rive.app/" rel="noreferrer noopener" data-projection-id="85" style="opacity: 1;"></a>

As you can see - it's empty. Therefore link text won't be announced to screen-readers, for example.
And search engines will also have it difficult if not impossible to extract link text from <canvas>.

Solution can be to insert link text and make it visually hidden but available to screen-readers.
This can be achieved with some CSS:

<a class="framer-11k26ej framer-17ln1yw" data-framer-name="Mouse Enter" data-highlight="true" href="https://editor.rive.app/" rel="noreferrer noopener" data-projection-id="85" style="opacity: 1;">
<span class="sr-only">Get Started</span>
</a>

with following CSS:

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

(CSS source: https://kittygiraudel.com/snippets/sr-only-class/)

With this fix link text would be invisible but at the same time available for both assistive technologies and search engines.

This should be fixed not only for React but for all web technologies that generate HTML.

Also - remove the tabindex="0" on <div data-framer-generated="true" class="framer-shBnO framer-v-hzrkcv" style="display:contents" tabindex="0">.

Start by tracing how the React runtime produces the generated anchor and wrapper shown in the issue, then check whether the same output is shared across the other web technologies mentioned. Compare the generated HTML with the requested accessible link text and wrapper tabindex behavior. Done means empty links have accessible names and the unnecessary tabindex is removed without changing the visible animation.