From ebfa14e957ee7ddda067ce9368ddd7d919f2feac Mon Sep 17 00:00:00 2001
From: Mary Bucknell <mbucknell@usgs.gov>
Date: Thu, 22 Feb 2018 12:24:23 -0600
Subject: [PATCH] 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 | 59 ++++++++++---------
assets/src/scripts/accessibility.spec.js | 11 ++++
.../scripts/components/hydrograph/index.js | 25 +++++++-
3 files changed, 65 insertions(+), 30 deletions(-)
diff --git a/assets/src/scripts/accessibility.js b/assets/src/scripts/accessibility.js
index e86fc2d0c..3444ae843 100644
--- a/assets/src/scripts/accessibility.js
+++ b/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;
});
+ }
}
diff --git a/assets/src/scripts/accessibility.spec.js b/assets/src/scripts/accessibility.spec.js
index a758f6658..ced358ab1 100644
--- a/assets/src/scripts/accessibility.spec.js
+++ b/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);
+ });
});
});
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 11adf9ec0..0976d6117 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/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(
--
GitLab