<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 chart-canvas--donut" aria-hidden="true"></div>
  <details class="chart-fallback">
    <summary>Data table</summary>
    <table>
      <thead>
        <tr>
          <th scope="col">{{ categoryKey() }}</th>
          <th scope="col">{{ valueKey() }}</th>
        </tr>
      </thead>
      <tbody>
        @for (row of tableRows(); track row.category) {
        <tr>
          <th scope="row">{{ row.category }}</th>
          <td>{{ row.value }}</td>
        </tr>
        }
      </tbody>
    </table>
  </details>
</figure>
