diff --git a/assets/src/scripts/d3-rendering/accessibility.js b/assets/src/scripts/d3-rendering/accessibility.js
index a2f5ecf69cb5c4d09fd9bb462aa32860fa7aa1ae..2eb765e67419ed0430840cd86b5104e74596bc89 100644
--- a/assets/src/scripts/d3-rendering/accessibility.js
+++ b/assets/src/scripts/d3-rendering/accessibility.js
@@ -7,9 +7,7 @@
* @param {Boolean} isInteractive
* @param {String} idPrefix
*/
-export const addSVGAccessibility = function(svg, {primaryTitle, secondaryTitle, description, isInteractive, idPrefix}) {
- const title = `${primaryTitle}${secondaryTitle ? ` -- ${secondaryTitle}` : ''}`;
-
+export const addSVGAccessibility = function(svg, {title, description, isInteractive, idPrefix}) {
svg.selectAll('title, desc').remove();
let descElement = svg.insert('desc', ':first-child')
.html(description);
diff --git a/assets/src/scripts/d3-rendering/accessibility.test.js b/assets/src/scripts/d3-rendering/accessibility.test.js
index 500261646454f8d65eb5168f8e03b4c88cef55a6..c97d7a2ae01e288d98d15f6a278574c56ecf2613 100644
--- a/assets/src/scripts/d3-rendering/accessibility.test.js
+++ b/assets/src/scripts/d3-rendering/accessibility.test.js
@@ -17,7 +17,7 @@ describe('svgAccessibility tests', () => {
it('Should add a title and desc tags and aria attributes', () => {
addSVGAccessibility(svg, {
- primaryTitle: 'This is a title',
+ title: 'This is a title',
description: 'This is a description',
isInteractive: false,
idPrefix: 'prefix'
@@ -34,35 +34,15 @@ describe('svgAccessibility tests', () => {
expect(svg.attr('aria-describedby')).toContain('prefix-desc');
});
- it('Should add a secondary title if needed and desc tags and aria attributes', () => {
- addSVGAccessibility(svg, {
- primaryTitle: 'This is a title',
- secondaryTitle: 'with a second parameter',
- description: 'This is a description',
- isInteractive: false,
- idPrefix: 'prefix'
- });
-
- const title = svg.selectAll('title');
- const desc = svg.selectAll('desc');
-
- expect(title.size()).toBe(1);
- expect(desc.size()).toBe(1);
- expect(title.html()).toEqual('This is a title -- with a second parameter');
- expect(desc.html()).toEqual('This is a description');
- expect(svg.attr('aria-labelledby')).toContain('prefix-title');
- expect(svg.attr('aria-describedby')).toContain('prefix-desc');
- });
-
it('Should remove the previous title and desc tags when called again', () => {
addSVGAccessibility(svg, {
- primaryTitle: 'This is a title',
+ title: 'This is a title',
description: 'This is a description',
isInteractive: false
});
addSVGAccessibility(svg, {
- primaryTitle: 'That is a title',
+ title: 'That is a title',
description: 'That is a description',
isInteractive: false
});
@@ -78,7 +58,7 @@ describe('svgAccessibility tests', () => {
it('Should not add a tabindex if isInteractive is false', () => {
addSVGAccessibility(svg, {
- primaryTitle: 'This is a title',
+ title: 'This is a title',
description: 'This is a description',
isInteractive: false
});
@@ -87,7 +67,7 @@ describe('svgAccessibility tests', () => {
it('Should add a tabindex if isInteractive is true', () => {
addSVGAccessibility(svg, {
- primaryTitle: 'This is a title',
+ title: 'This is a title',
description: 'This is a description',
isInteractive: true
});
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js
index 5f792251ed72b8560129f8755db456c6ebbf368f..b4bc18ac585e6d2a81ccd38c24b48b0d54ce2edf 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/legend-data.js
@@ -6,14 +6,14 @@ import {defineLineMarker, defineRectangleMarker, defineCircleMarker, defineTextO
import {showFloodLevels} from 'ml/selectors/flood-data-selector';
import {getPrimaryMedianStatisticsData} from 'ml/selectors/hydrograph-data-selector';
-import {isCompareIVDataVisible, isMedianDataVisible} from 'ml/selectors/hydrograph-state-selector';
+import {isCompareIVDataVisible, isMedianDataVisible,
+ getSelectedSecondaryParameterCode} from 'ml/selectors/hydrograph-state-selector';
import {getUniqueGWKinds} from './discrete-data';
import {getFloodLevelData} from './flood-level-data';
import {getIVUniqueDataKinds, HASH_ID} from './iv-data';
import {getThresholdsInRange} from './thresholds-data';
import {getPrimaryParameter} from './time-series-data';
-import {getSelectedSecondaryParameterCode} from '../../../selectors/hydrograph-state-selector';
const TS_LABEL = {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
index 9e9d25c904bfda84b63cd929f7367ff465de2864..c92552701ab18aa473d105691d89fa6e911fe65c 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js
@@ -1,5 +1,5 @@
import {line as d3Line, curveStepAfter} from 'd3-shape';
-import {createStructuredSelector} from 'reselect';
+import {createSelector, createStructuredSelector} from 'reselect';
import config from 'ui/config';
import {link} from 'ui/lib/d3-redux';
@@ -161,6 +161,18 @@ const drawWatermark = function(elem, store) {
}, getMainLayout));
};
+/**
+ * Redux selector helper function that can combine the primary and secondary data titles into a single string.
+ * @return {String} the concatenated accessibility title when a secondary data parameter is selected, otherwise returns
+ * the standard primary parameter title.
+ */
+const combinedAccessibilityTitle = createSelector(
+ getTitle('primary'),
+ getTitle('secondary'),
+ (primaryTitle, secondaryTitle) => {
+ return `${primaryTitle}${secondaryTitle ? ` -- ${secondaryTitle}` : ''}`;
+ });
+
/*
* Initialize the time series svg and other elements but don't render any data
* @param {D3 selection} elem
@@ -198,8 +210,7 @@ export const initializeTimeSeriesGraph = function(elem, store, siteNo, agencyCod
.attr('height', layout.height - layout.margin.bottom);
}, getMainLayout))
.call(link(store, addSVGAccessibility, createStructuredSelector({
- primaryTitle: getTitle('primary'),
- secondaryTitle: getTitle('secondary'),
+ title: combinedAccessibilityTitle,
description: getDescription,
isInteractive: () => true,
idPrefix: () => 'hydrograph'