Added code to only render the sr-only table when there is data. The code also...

Added code to only render the sr-only table when there is data. The code also removes the description div. Updated the tests for the new code. Added in the ability to render a table for the previous year's data.

assets/src/scripts/accessibility.js

@@ -26,49 +26,52 @@ function addSVGAccessibility(svg, {title, description, isInteractive}) {
  * of the data array.
  * @param {String} container - Can be a selector string or d3 selection
  * @param {Array} columnNames - array of strings
- * @param {Array} data - array of array of strings
+ * @param {Array} data - array of array of strings representing the table rows
  * @param {String} describeById - Optional id string of the element that describes this table
  * @param {String} describeByText - Optional text that describes this table
  */
 function addSROnlyTable(container, {columnNames, data, describeById=null, describeByText=null}) {
     container.selectAll('table.usa-sr-only').remove();
+    container.selectAll('div.usa-sr-only').remove();
 
-    const table = container
-        .append('table')
-        .attr('class', 'usa-sr-only');
+    if (data.length > 0) {
+        const table = container
+            .append('table')
+            .attr('class', 'usa-sr-only');
 
-    if (describeById && describeByText) {
-        container.select(`div#${describeById}`).remove();
-        table.attr('aria-describedby', describeById);
-        container.append('div')
-            .attr('id', describeById)
-            .attr('class', 'usa-sr-only')
-            .text(describeByText);
-    }
+        if (describeById && describeByText) {
+            container.select(`div#${describeById}`).remove();
+            table.attr('aria-describedby', describeById);
+            container.append('div')
+                .attr('id', describeById)
+                .attr('class', 'usa-sr-only')
+                .text(describeByText);
+        }
 
-    table.append('thead')
-        .append('tr')
-        .selectAll('th')
-        .data(columnNames)
-        .enter().append('th')
+        table.append('thead')
+            .append('tr')
+            .selectAll('th')
+            .data(columnNames)
+            .enter().append('th')
             .attr('scope', 'col')
-            .text(function(d) {
+            .text(function (d) {
                 return d;
             });
 
-    const data_rows = table.append('tbody')
-        .selectAll('tr')
-        .data(data)
-        .enter().append('tr');
+        const data_rows = table.append('tbody')
+            .selectAll('tr')
+            .data(data)
+            .enter().append('tr');
 
-    data_rows.selectAll('td')
-        .data(function(d) {
-            return d;
-        })
-        .enter().append('td')
-            .text(function(d) {
+        data_rows.selectAll('td')
+            .data(function (d) {
+                return d;
+            })
+            .enter().append('td')
+            .text(function (d) {
                 return d;
             });
+    }
 
 }
 

assets/src/scripts/accessibility.spec.js

@@ -125,6 +125,17 @@ describe('svgAccessibility tests', () => {
                });
            });
        });
+       it('Table should be removed if recreated with no data', () => {
+           addSROnlyTable(select(document.getElementById('test-div')), {
+               columnNames: columnNames,
+               data: [],
+               describeById: describeById,
+               describeByText: describeByText
+           });
+
+           expect(container.select('table').size()).toBe(0);
+           expect(container.select('div').size()).toBe(0);
+       });
 
     });
 });

assets/src/scripts/components/hydrograph/index.js

@@ -254,10 +254,31 @@ const timeSeriesGraph = function (elem) {
                     return [value.value, value.time];
                 })
             ),
-            describeById: () => 'time-series-sr-desc',
+            describeById: () => 'current-time-series-sr-desc',
             describeByText: () => 'current time series data in tabular format'
     })));
-
+    elem.append('div')
+        .call(link(addSROnlyTable, createStructuredSelector({
+            columnNames: createSelector(
+                titleSelector,
+                (title) => [title, 'Time']
+            ),
+            data: createSelector(
+                isVisibleSelector('compare'),
+                pointsSelector('compare'),
+                (isVisible, points) => {
+                    if (isVisible) {
+                        return points.map((value) => {
+                            return [value.value, value.time]
+                        });
+                    } else {
+                        return [];
+                    }
+                }
+            ),
+            describeById: () => 'compare-time-series-sr-desc',
+            describeByText: () => 'previous year time series data in tabular format'
+    })));
     elem.append('div')
         .call(link(addSROnlyTable, createStructuredSelector({
             columnNames: createSelector(