Add accessible alternative for chart data

[ckundo]

Problem

The "Build Duration Trend" chart is purely visual with no text alternative or data table for screen readers.

Files to Update

• Dashboard component (chart section)

Tasks

• Add role="img" to chart container
• Add aria-labelledby pointing to description
• Provide text description of chart data
• Create collapsible data table alternative using <details>
• Test with screen reader

WCAG

1.1.1 Non-text Content (Level A) - Non-text content must have text alternative

Recommended Implementation

<section aria-labelledby="chart-heading">
  <h2 id="chart-heading">Build Duration Trend</h2>
  
  <div class="chart-container" role="img" aria-labelledby="chart-desc">
    <div id="chart-desc" class="sr-only">
      Bar chart showing build duration over the last 20 builds. 
      4 builds failed with longer durations highlighted.
      See data table below for details.
    </div>
    <!-- Chart bars -->
  </div>
  
  <details>
    <summary>View chart data as table</summary>
    <table>
      <caption>Build Duration Trend Data</caption>
      <thead>
        <tr>
          <th scope="col">Build Number</th>
          <th scope="col">Duration</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">#1031</th>
          <td>4m 27s</td>
          <td>Success</td>
        </tr>
        <!-- ... -->
      </tbody>
    </table>
  </details>
</section>

Expected Outcome

Screen reader users can access chart data through text alternative