Add basic accessibility

package.json

@@ -34,8 +34,8 @@
     "ejs": "3.1.10",
     "fs-extra": "11.2.0",
     "chart.js": "4.4.6",
-    "chartjs-plugin-zoom": "2.2.0",
     "chartjs-adapter-date-fns": "3.0.0",
+    "chartjs-plugin-zoom": "2.2.0",
     "highcharts": "11.4.8",
     "node-fetch": "3.3.2",
     "recursive-readdir": "2.2.3",

src/js/histogram.js

@@ -496,6 +496,9 @@ function drawChart(series, containerId, options) {
     const url = `https://github.com/HTTPArchive/bigquery/blob/master/sql/timeseries/${metric}.sql`;
     window.open(url, '_blank');
   });
+
+  // Show Buttons now chart is active
+  document.getElementById(`${options.chartId}-buttons`)?.classList.remove('hidden');
 }
 
 // Export directly to global scope for use by Jinja template.

src/js/timeseries.js

@@ -360,7 +360,7 @@ async function drawChart(options, series) {
                 const extraMessage = matchingFlag ? matchingFlag.label + ': ' + matchingFlag.title : '';
                 return `${extraMessage}`;
               },
-            }
+            },
           },
           legend: {
             display: true,
@@ -601,6 +601,9 @@ async function drawChart(options, series) {
     const url = `https://github.com/HTTPArchive/bigquery/blob/master/sql/timeseries/${metric}.sql`;
     window.open(url, '_blank');
   });
+
+  // Show Buttons now chart is active
+  document.getElementById(`${options.chartId}-buttons`)?.classList.remove('hidden');
 }
 
 const DEFAULT_FIELDS = ['p10', 'p25', 'p50', 'p75', 'p90'];

templates/report/histogram.html

@@ -14,17 +14,19 @@
       <section id="{{ metric.id }}" class="report-metric">
         {{ metric_info(metric, viz) }}
         <div class="chart">
-          <div class="chart-buttons">
+          <div id="{{ metric.id }}-chart-buttons" class="chart-buttons hidden">
             <!-- Zoom buttons -->
             <div id="{{ metric.id }}-zoom-buttons">
             </div>
             <!-- Export and query buttons -->
             <div id="{{ metric.id }}-other-buttons">
-              <button id="{{ metric.id }}-chart-download-png">Download Png</button>
+              <button id="{{ metric.id }}-chart-download-png">Download PNG</button>
               <button id="{{ metric.id }}-chart-show-query">Show query</button>
             </div>
           </div>
-          <canvas id="{{ metric.id }}-chart"></canvas>
+          <canvas id="{{ metric.id }}-chart" role="img" aria-label="Chart of {{ metric.name }}" aria-describedby="{{ metric.id }}-table">
+            Chart of {{ metric.name }}
+          </canvas>
         </div>
         <button class="btn show-hide">Show Tables</button>
         <div class="table-wrapper">

templates/report/timeseries.html

@@ -7,7 +7,7 @@
       <section id="{{ metric.id }}" class="report-metric">
         {{ metric_info(metric, viz) }}
         <div class="chart">
-          <div class="chart-buttons">
+          <div id="{{ metric.id }}-chart-buttons" class="chart-buttons hidden">
             <!-- Zoom buttons -->
             <div id="{{ metric.id }}-zoom-buttons" class="zoom-buttons">
               <div class="zoom-label">Zoom:</div>
@@ -23,12 +23,14 @@
             <!-- Export and query buttons -->
             <div id="{{ metric.id }}-other-buttons">
               <div>
-                <button id="{{ metric.id }}-chart-download-png" class="download-chart">Download Png</button>
+                <button id="{{ metric.id }}-chart-download-png">Download PNG</button>
                 <button id="{{ metric.id }}-chart-show-query">Show query</button>
               </div>
             </div>
           </div>
-          <canvas id="{{ metric.id }}-chart"></canvas>
+          <canvas id="{{ metric.id }}-chart" role="img" aria-label="Chart of {{ metric.name }}" aria-describedby="{{ metric.id }}-table">
+            Chart of {{ metric.name }}
+          </canvas>
         </div>
         <button class="btn show-hide" data-metric="{{ metric.id }}">Show Table</button>
         <div class="table-wrapper">