empty-heading-or-link

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when a heading or a link has nothing inside it to announce.

A screen reader builds a list of headings to jump between and a list of links to tab through, and it announces a button by the text on it. An empty one is a row in that list with nothing in it — reachable, and unusable.

Put the text inside the tag. Where the text is genuinely elsewhere — an icon button, an icon-only link, a heading whose words are drawn — aria-label says what it is, and is accepted here:

<button type="button" aria-label="Close" onclick={close}>
  <Icon name="cross" aria-hidden="true" />
</button>

The icon button is the commonest of the three, and the one where nothing on screen will ever remind anybody: it looks finished, and a reader hears only the word button.

An element whose content this cannot read is left alone: <h2>{title}</h2> may well have text and nothing here can prove it does not.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.