Merge pull request #2012 from GSA/1999-dashboard-a11y-fixes

1999 dashboard a11y fixes

app/assets/javascripts/activityChart.js

@@ -33,30 +33,43 @@
                     .attr('id', 'tooltip')
                     .style('display', 'none');
             }
-            // Create legend
+
+            // Calculate total messages
+            const totalMessages = d3.sum(deliveredData) + d3.sum(failedData);
+
+            // Create legend only if there are messages
             const legendContainer = d3.select('.chart-legend');
             legendContainer.selectAll('*').remove(); // Clear any existing legend
 
-            const legendData = [
+            if (totalMessages > 0) {
-                { label: 'Delivered', color: COLORS.delivered },
+                // Show legend if there are messages
-                { label: 'Failed', color: COLORS.failed }
+                const legendData = [
-            ];
+                    { label: 'Delivered', color: COLORS.delivered },
+                    { label: 'Failed', color: COLORS.failed }
+                ];
 
-            const legendItem = legendContainer.selectAll('.legend-item')
+                const legendItem = legendContainer.selectAll('.legend-item')
-                .data(legendData)
+                    .data(legendData)
-                .enter()
+                    .enter()
-                .append('div')
+                    .append('div')
-                .attr('class', 'legend-item');
+                    .attr('class', 'legend-item');
 
-            legendItem.append('div')
+                legendItem.append('div')
-                .attr('class', 'legend-rect')
+                    .attr('class', 'legend-rect')
-                .style('background-color', d => d.color)
+                    .style('background-color', d => d.color)
-                .style('display', 'inline-block')
+                    .style('display', 'inline-block')
-                .style('margin-right', '5px');
+                    .style('margin-right', '5px');
 
-            legendItem.append('span')
+                legendItem.append('span')
-                .attr('class', 'legend-label')
+                    .attr('class', 'legend-label')
-                .text(d => d.label);
+                    .text(d => d.label);
+
+                // Ensure the legend is shown
+                legendContainer.style('display', 'flex');
+            } else {
+                // Hide the legend if there are no messages
+                legendContainer.style('display', 'none');
+            }
 
             const x = d3.scaleBand()
                 .domain(labels)

app/templates/base.html

@@ -82,7 +82,7 @@
 
       {% if current_user.is_authenticated %}
         {% block sessionUserWarning %}
-        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
+        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timeLeft">
           <div class="usa-modal__content">
             <div class="usa-modal__main">
               <h2 class="usa-modal__heading" id="sessionTimerHeading">

app/templates/views/activity/all-activity.html

@@ -60,7 +60,7 @@
     <h2 class="margin-top-4 margin-bottom-1">Sent jobs</h2>
     <div class="usa-table-container--scrollable-mobile">
       <table class="usa-table usa-table--compact job-table">
-        <caption></caption>
+        <caption class="usa-sr-only">Table showing all sent jobs for this service</caption>
         <thead class="table-field-headings">
           <tr>
             <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId">
@@ -103,7 +103,10 @@
                 <td class="table-field sender">{{ job.created_by.name }}</td>
                 <td class="table-field report">
                   {% if job.time_left != "Data no longer available" %}
-                    <a href="{{ job.download_link }}"><img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="File Download Icon"></a>
+                    <a href="{{ job.download_link }}">
+                      <img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="">
+                      <span class="usa-sr-only">Download report link</span>
+                    </a>
                   {% else %}
                     <span>N/A</span>
                   {% endif %}

app/templates/views/dashboard/dashboard.html

@@ -38,7 +38,7 @@
       <form class="usa-form">
         <label class="usa-label" for="options">Account</label>
         <select class="usa-select margin-bottom-2" name="options" id="options">
-          <option value>- Select -</option>
+          <option value disabled>- Select -</option>
           <option value="service" selected>{{ current_service.name }}</option>
           <option value="individual">{{ current_user.name }}</option>
         </select>
@@ -60,6 +60,7 @@
       <div id="table1" class="table-overflow-x-auto hidden">
         <h2 class="margin-top-4 margin-bottom-1">My activity</h2>
         <table class="usa-table job-table">
+          <caption class="usa-sr-only">Table showing the sent jobs for {{current_user.name}}</caption>
           <thead class="table-field-headings">
             <tr>
               <th scope="col" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
@@ -100,6 +101,7 @@
       <div id="table2" class="table-overflow-x-auto visible">
         <h2 class="margin-top-4 margin-bottom-1">Service activity</h2>
         <table class="usa-table job-table">
+          <caption class="usa-sr-only">Table showing the sent jobs for this service</caption>
           <thead class="table-field-headings">
             <tr>
               <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>

tests/javascripts/activityChart.test.js

@@ -33,7 +33,7 @@ beforeAll(done => {
       <div id="activityChart" >
         <div class="chart-header">
           <div class="chart-subtitle">Service Name - last 7 days</div>
-          <div class="chart-legend" aria-label="Legend"></div>
+          <div class="chart-legend" role="region" aria-label="Legend"></div>
         </div>
         <div class="chart-container" id="weeklyChart" data-service-id="12345" style="width: 600px;"></div>
         <table id="weeklyTable" class="usa-sr-only usa-table"></table>
@@ -125,6 +125,37 @@ test('Check HTML content after chart creation', () => {
   expect(container.querySelectorAll('rect').length).toBeGreaterThan(0);
 });
 
+test('Legend is visible when there are delivered or failed messages', () => {
+  // Example data with delivered and failed messages
+  const labels = ['Day 1', 'Day 2'];
+  const deliveredData = [10, 20];  // Mock delivered data
+  const failedData = [5, 0];  // Mock failed data
+
+  // Call the createChart function
+  window.createChart('#weeklyChart', labels, deliveredData, failedData);
+
+  // Check if the legend is displayed using computed style
+  const legendContainer = document.querySelector('.chart-legend');
+  const legendDisplayStyle = window.getComputedStyle(legendContainer).display;
+  expect(legendDisplayStyle).toBe('flex');
+  expect(legendContainer.querySelectorAll('.legend-item').length).toBe(2); // Ensure two legend items
+});
+
+test('Legend is hidden when there are no delivered or failed messages', () => {
+  // Example data with no delivered and no failed messages
+  const labels = ['Day 1', 'Day 2'];
+  const deliveredData = [0, 0];  // No delivered messages
+  const failedData = [0, 0];  // No failed messages
+
+  // Call the createChart function
+  window.createChart('#weeklyChart', labels, deliveredData, failedData);
+
+  // Check if the legend is hidden using computed style
+  const legendContainer = document.querySelector('.chart-legend');
+  const legendDisplayStyle = window.getComputedStyle(legendContainer).display;
+  expect(legendDisplayStyle).toBe('none');
+});
+
 test('Fetches data and creates chart and table correctly', async () => {
   const mockResponse = {
     '2024-07-01': { sms: { delivered: 50, failed: 5 } },

tests/javascripts/timeoutPopup.test.js

@@ -2,7 +2,7 @@ beforeAll(() => {
     jest.spyOn(global, 'setTimeout');
 
     document.body.innerHTML = `
-        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
+        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timeLeft">
             <div class="usa-modal__content">
                 <div class="usa-modal__main">
                 <h2 class="usa-modal__heading" id="sessionTimerHeading">