<figure
  role="img"
  class="chart-figure"
  [attr.aria-label]="ariaLabel()"
  [attr.aria-labelledby]="titleId"
  [attr.aria-describedby]="descId"
>
  <figcaption [id]="titleId" class="chart-caption">{{ caption() }}</figcaption>
  <p [id]="descId" class="chart-description sr-only">{{ description() }}</p>
  <div class="chart-canvas" aria-hidden="true"></div>
  <details class="chart-fallback">
    <summary>Data table</summary>
    <table>
      <thead>
        <tr>
          <th scope="col">{{ xLabel() ?? xKey() }}</th>
          <th scope="col">{{ seriesKey() }}</th>
          <th scope="col">{{ yLabel() ?? yKey() }}</th>
        </tr>
      </thead>
      <tbody>
        @for (row of tableRows(); track $index) {
        <tr>
          <th scope="row">{{ row.x }}</th>
          <td>{{ row.series }}</td>
          <td>{{ row.y }}</td>
        </tr>
        }
      </tbody>
    </table>
  </details>
</figure>
