Commit before branch switch

app/assets/javascripts/chartDashboard.js

@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
             canvas.height = 100;
 
             var chartContainer = document.getElementById('chartContainer');
+            var chartTitle = document.getElementById('chartTitle').textContent;
             var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent'));
             var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining'));
             var totalMessages = sms_sent + sms_remaining_messages;
@@ -80,7 +81,6 @@ document.addEventListener('DOMContentLoaded', function () {
                         }
                     },
                     responsive: true,
-            // maintainAspectRatio: false,
                     layout: {
                         padding: {
                             left: 0, // Adjust left padding to remove extra space
@@ -95,6 +95,46 @@ document.addEventListener('DOMContentLoaded', function () {
             // Update the message below the chart
             document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
 
+           // Create and populate the accessible table
+            var tableContainer = document.getElementById('totalMessageTable');
+            var table = document.createElement('table');
+            table.className = 'usa-sr-only';
+
+            var caption = document.createElement('caption');
+            caption.textContent = chartTitle;
+            table.appendChild(caption);
+
+            var thead = document.createElement('thead');
+            var theadRow = document.createElement('tr');
+            var thLabel = document.createElement('th');
+            thLabel.textContent = 'Label';
+            var thValue = document.createElement('th');
+            thValue.textContent = 'Value';
+            theadRow.appendChild(thLabel);
+            theadRow.appendChild(thValue);
+            thead.appendChild(theadRow);
+            table.appendChild(thead);
+
+            var tbody = document.createElement('tbody');
+            var tableData = [
+                { label: 'Messages Sent', value: sms_sent.toLocaleString() },
+                { label: 'Remaining', value: sms_remaining_messages.toLocaleString() }
+            ];
+
+            tableData.forEach(function(rowData) {
+                var row = document.createElement('tr');
+                var cellLabel = document.createElement('td');
+                var cellValue = document.createElement('td');
+                cellLabel.textContent = rowData.label;
+                cellValue.textContent = rowData.value;
+                row.appendChild(cellLabel);
+                row.appendChild(cellValue);
+                tbody.appendChild(row);
+            });
+
+            table.appendChild(tbody);
+            tableContainer.appendChild(table);
+
             // Ensure the chart resizes correctly on window resize
             window.addEventListener('resize', function() {
                 canvas.width = canvas.parentElement.clientWidth;

app/assets/sass/uswds/_data-visualization.scss

@@ -0,0 +1,22 @@
+@use "uswds-core" as *;
+
+#chartContainer {
+   width: 100%;
+}
+
+#totalMessageChart {
+   width: 100%;
+   margin-left: units(-1);
+}
+
+#message {
+   text-align: left;
+   font-size: units(2);
+}
+
+.chart-title {
+   text-align: left;
+   width: 100%;
+   font-size: units(3);
+   font-weight: bold;
+}

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -589,26 +589,3 @@ details form {
    border: 1px solid #face00;
    border-radius: 7px;
 }
-
-// Data Viz
-
-#chartContainer {
-   width: 100%;
-}
-
-#myChart {
-   width: 100%;
-   margin-left: units(-1);
-}
-
-#message {
-   text-align: left;
-   font-size: units(2);
-}
-
-.chart-title {
-   text-align: left;
-   width: 100%;
-   font-size: units(3);
-   font-weight: bold;
-}

app/assets/sass/uswds/styles.scss

@@ -1,4 +1,5 @@
 @forward "uswds-theme";
 @forward "uswds";
 @forward "uswds-theme-custom-styles";
+@forward "data-visualization";
 @forward "legacy-styles";

app/templates/views/dashboard/dashboard.html

@@ -32,6 +32,7 @@
       <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="totalMessageChart" role="img" aria-labelledby="chartTitle chartDesc" height="100"></canvas>
+      <div id="totalMessageTable"></div>
     </div>
     <div id="message"></div>