Accessibility updates

app/main/views/dashboard.py

@@ -86,8 +86,8 @@ def service_dashboard(service_id):
         current_service.id,
     )
     usage_data = get_annual_usage_breakdown(yearly_usage, free_sms_allowance)
-    sms_sent=usage_data['sms_sent'],
-    sms_allowance_remaining=usage_data['sms_allowance_remaining'],
+    sms_sent = (usage_data["sms_sent"],)
+    sms_allowance_remaining = (usage_data["sms_allowance_remaining"],)
 
     return render_template(
         "views/dashboard/dashboard.html",

app/templates/views/dashboard/dashboard.html

@@ -29,10 +29,12 @@
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
     {% if current_user.has_permissions('manage_service') %}
     <div id="chartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
-      <h3 class="margin-bottom-1">2024 Total Message Allowance</h3>
-      <canvas id="myChart" height="100"></canvas>
+      <h3 class="margin-bottom-1" id="chartTitle">2024 Total Message Allowance</h3>
+      <div class="usa-sr-only" id="chartDesc">A bar chart showing the messages sent against the total message allowance for 2024 to date</div>
+      <canvas id="myChart" role="img" aria-labelledby="chartTitle chartDesc" height="100"></canvas>
     </div>
     <div id="message"></div>
+
   {% endif %}
     <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
     <div class="table-wrapper">

gulpfile.js

@@ -56,6 +56,10 @@ const copy = {
   gtm: () => {
     return src(paths.src + 'js/gtm_head.js')
       .pipe(dest(paths.dist + 'js/'));
+  },
+  chart: () => {
+    return src(paths.src + 'js/chart.umd.js')
+      .pipe(dest(paths.dist + 'js/'));
   }
 };
 
@@ -201,7 +205,8 @@ const defaultTask = parallel(
     ),
     uswds.compile,
     uswds.copyAssets,
-    copy.gtm
+    copy.gtm,
+    copy.chart
   )
 );