/* *
|
*
|
* (c) 2009-2019 Øystein Moseng
|
*
|
* Accessibility component for chart info region and table.
|
*
|
* License: www.highcharts.com/license
|
*
|
* */
|
|
'use strict';
|
|
Object.defineProperty(exports, "__esModule", {
|
value: true
|
});
|
|
var _Globals = require('../../../parts/Globals.js');
|
|
var _Globals2 = _interopRequireDefault(_Globals);
|
|
var _AccessibilityComponent = require('../AccessibilityComponent.js');
|
|
var _AccessibilityComponent2 = _interopRequireDefault(_AccessibilityComponent);
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
var merge = _Globals2.default.merge,
|
pick = _Globals2.default.pick;
|
|
/**
|
* Return simplified text description of chart type. Some types will not be
|
* familiar to most users, but in those cases we try to add a description of the
|
* type.
|
*
|
* @private
|
* @function Highcharts.Chart#getTypeDescription
|
* @param {Array<string>} types The series types in this chart.
|
* @return {string} The text description of the chart type.
|
*/
|
_Globals2.default.Chart.prototype.getTypeDescription = function (types) {
|
var firstType = types[0],
|
firstSeries = this.series && this.series[0] || {},
|
mapTitle = firstSeries.mapTitle,
|
formatContext = {
|
numSeries: this.series.length,
|
numPoints: firstSeries.points && firstSeries.points.length,
|
chart: this,
|
mapTitle: mapTitle
|
};
|
|
if (!firstType) {
|
return this.langFormat('accessibility.chartTypes.emptyChart', formatContext);
|
}
|
|
if (firstType === 'map') {
|
return mapTitle ? this.langFormat('accessibility.chartTypes.mapTypeDescription', formatContext) : this.langFormat('accessibility.chartTypes.unknownMap', formatContext);
|
}
|
|
if (this.types.length > 1) {
|
return this.langFormat('accessibility.chartTypes.combinationChart', formatContext);
|
}
|
|
var typeDesc = this.langFormat('accessibility.seriesTypeDescriptions.' + firstType, { chart: this }),
|
multi = this.series && this.series.length === 1 ? 'Single' : 'Multiple';
|
|
return (this.langFormat('accessibility.chartTypes.' + firstType + multi, formatContext) || this.langFormat('accessibility.chartTypes.default' + multi, formatContext)) + (typeDesc ? ' ' + typeDesc : '');
|
};
|
|
/**
|
* The InfoRegionComponent class
|
*
|
* @private
|
* @class
|
* @name Highcharts.InfoRegionComponent
|
* @param {Highcharts.Chart} chart
|
* Chart object
|
*/
|
var InfoRegionComponent = function InfoRegionComponent(chart) {
|
this.initBase(chart);
|
this.init();
|
};
|
InfoRegionComponent.prototype = new _AccessibilityComponent2.default();
|
_Globals2.default.extend(InfoRegionComponent.prototype, /** @lends Highcharts.InfoRegionComponent */{ // eslint-disable-line
|
|
/**
|
* Init the component
|
* @private
|
*/
|
init: function init() {
|
// Add ID and summary attr to table HTML
|
var chart = this.chart,
|
component = this;
|
this.addEvent(chart, 'afterGetTable', function (e) {
|
if (chart.options.accessibility.enabled) {
|
component.tableAnchor.setAttribute('aria-expanded', true);
|
e.html = e.html.replace('<table ', '<table tabindex="0" summary="' + chart.langFormat('accessibility.tableSummary', { chart: chart }) + '"');
|
}
|
});
|
|
// Focus table after viewing
|
this.addEvent(chart, 'afterViewData', function (tableDiv) {
|
// Use small delay to give browsers & AT time to register new table
|
setTimeout(function () {
|
var table = tableDiv && tableDiv.getElementsByTagName('table')[0];
|
if (table && table.focus) {
|
table.focus();
|
}
|
}, 300);
|
});
|
},
|
|
/**
|
* Called on first render/updates to the chart, including options changes.
|
*/
|
onChartUpdate: function onChartUpdate() {
|
// Create/update the screen reader region
|
var chart = this.chart,
|
a11yOptions = chart.options.accessibility,
|
hiddenSectionId = 'highcharts-information-region-' + chart.index,
|
hiddenSection = this.screenReaderRegion = this.screenReaderRegion || this.createElement('div'),
|
tableShortcut = this.tableHeading = this.tableHeading || this.createElement('h6'),
|
tableShortcutAnchor = this.tableAnchor = this.tableAnchor || this.createElement('a'),
|
chartHeading = this.chartHeading = this.chartHeading || this.createElement('h6');
|
|
hiddenSection.setAttribute('id', hiddenSectionId);
|
if (a11yOptions.landmarkVerbosity === 'all') {
|
hiddenSection.setAttribute('role', 'region');
|
}
|
hiddenSection.setAttribute('aria-label', chart.langFormat('accessibility.screenReaderRegionLabel', { chart: chart }));
|
|
hiddenSection.innerHTML = a11yOptions.screenReaderSectionFormatter ? a11yOptions.screenReaderSectionFormatter(chart) : this.defaultScreenReaderSectionFormatter(chart);
|
|
// Add shortcut to data table if export-data is loaded
|
if (chart.getCSV && chart.options.accessibility.addTableShortcut) {
|
var tableId = 'highcharts-data-table-' + chart.index;
|
tableShortcutAnchor.innerHTML = chart.langFormat('accessibility.viewAsDataTable', { chart: chart });
|
tableShortcutAnchor.href = '#' + tableId;
|
// Make this unreachable by user tabbing
|
tableShortcutAnchor.setAttribute('tabindex', '-1');
|
tableShortcutAnchor.setAttribute('role', 'button');
|
tableShortcutAnchor.setAttribute('aria-expanded', false);
|
tableShortcutAnchor.onclick = chart.options.accessibility.onTableAnchorClick || function () {
|
chart.viewData();
|
};
|
tableShortcut.appendChild(tableShortcutAnchor);
|
hiddenSection.appendChild(tableShortcut);
|
}
|
|
// Note: JAWS seems to refuse to read aria-label on the container, so
|
// add an h6 element as title for the chart.
|
chartHeading.innerHTML = chart.langFormat('accessibility.chartHeading', { chart: chart });
|
chartHeading.setAttribute('aria-hidden', false);
|
chart.renderTo.insertBefore(chartHeading, chart.renderTo.firstChild);
|
chart.renderTo.insertBefore(hiddenSection, chart.renderTo.firstChild);
|
this.unhideElementFromScreenReaders(hiddenSection);
|
|
// Visually hide the section and the chart heading
|
merge(true, chartHeading.style, this.hiddenStyle);
|
merge(true, hiddenSection.style, this.hiddenStyle);
|
},
|
|
/**
|
* The default formatter for the screen reader section.
|
* @private
|
*/
|
defaultScreenReaderSectionFormatter: function defaultScreenReaderSectionFormatter() {
|
var chart = this.chart,
|
options = chart.options,
|
chartTypes = chart.types,
|
axesDesc = this.getAxesDescription();
|
|
return '<h5>' + (options.accessibility.typeDescription || chart.getTypeDescription(chartTypes)) + '</h5>' + (options.subtitle && options.subtitle.text ? '<div>' + this.htmlencode(options.subtitle.text) + '</div>' : '') + (options.accessibility.description ? '<div>' + options.accessibility.description + '</div>' : '') + (axesDesc.xAxis ? '<div>' + axesDesc.xAxis + '</div>' : '') + (axesDesc.yAxis ? '<div>' + axesDesc.yAxis + '</div>' : '');
|
},
|
|
/**
|
* Return object with text description of each of the chart's axes.
|
* @private
|
* @return {object}
|
*/
|
getAxesDescription: function getAxesDescription() {
|
var chart = this.chart,
|
component = this,
|
xAxes = chart.xAxis,
|
|
// Figure out when to show axis info in the region
|
showXAxes = xAxes.length > 1 || xAxes[0] && pick(xAxes[0].options.accessibility && xAxes[0].options.accessibility.enabled, !chart.angular && chart.hasCartesianSeries && chart.types.indexOf('map') < 0),
|
yAxes = chart.yAxis,
|
showYAxes = yAxes.length > 1 || yAxes[0] && pick(yAxes[0].options.accessibility && yAxes[0].options.accessibility.enabled, chart.hasCartesianSeries && chart.types.indexOf('map') < 0),
|
desc = {};
|
|
if (showXAxes) {
|
desc.xAxis = chart.langFormat('accessibility.axis.xAxisDescription' + (xAxes.length > 1 ? 'Plural' : 'Singular'), {
|
chart: chart,
|
names: chart.xAxis.map(function (axis) {
|
return axis.getDescription();
|
}),
|
ranges: chart.xAxis.map(function (axis) {
|
return component.getAxisRangeDescription(axis);
|
}),
|
numAxes: xAxes.length
|
});
|
}
|
|
if (showYAxes) {
|
desc.yAxis = chart.langFormat('accessibility.axis.yAxisDescription' + (yAxes.length > 1 ? 'Plural' : 'Singular'), {
|
chart: chart,
|
names: chart.yAxis.map(function (axis) {
|
return axis.getDescription();
|
}),
|
ranges: chart.yAxis.map(function (axis) {
|
return component.getAxisRangeDescription(axis);
|
}),
|
numAxes: yAxes.length
|
});
|
}
|
|
return desc;
|
},
|
|
/**
|
* Return string with text description of the axis range.
|
* @private
|
* @param {Highcharts.Axis} axis The axis to get range desc of.
|
* @return {string} A string with the range description for the axis.
|
*/
|
getAxisRangeDescription: function getAxisRangeDescription(axis) {
|
var chart = this.chart,
|
axisOptions = axis.options || {};
|
|
// Handle overridden range description
|
if (axisOptions.accessibility && axisOptions.accessibility.rangeDescription !== undefined) {
|
return axisOptions.accessibility.rangeDescription;
|
}
|
|
// Handle category axes
|
if (axis.categories) {
|
return chart.langFormat('accessibility.axis.rangeCategories', {
|
chart: chart,
|
axis: axis,
|
numCategories: axis.dataMax - axis.dataMin + 1
|
});
|
}
|
|
// Use range, not from-to?
|
if (axis.isDatetimeAxis && (axis.min === 0 || axis.dataMin === 0)) {
|
var range = {},
|
rangeUnit = 'Seconds';
|
range.Seconds = (axis.max - axis.min) / 1000;
|
range.Minutes = range.Seconds / 60;
|
range.Hours = range.Minutes / 60;
|
range.Days = range.Hours / 24;
|
['Minutes', 'Hours', 'Days'].forEach(function (unit) {
|
if (range[unit] > 2) {
|
rangeUnit = unit;
|
}
|
});
|
range.value = range[rangeUnit].toFixed(rangeUnit !== 'Seconds' && rangeUnit !== 'Minutes' ? 1 : 0 // Use decimals for days/hours
|
);
|
|
// We have the range and the unit to use, find the desc format
|
return chart.langFormat('accessibility.axis.timeRange' + rangeUnit, {
|
chart: chart,
|
axis: axis,
|
range: range.value.replace('.0', '')
|
});
|
}
|
|
// Just use from and to.
|
// We have the range and the unit to use, find the desc format
|
var a11yOptions = chart.options.accessibility;
|
return chart.langFormat('accessibility.axis.rangeFromTo', {
|
chart: chart,
|
axis: axis,
|
rangeFrom: axis.isDatetimeAxis ? chart.time.dateFormat(a11yOptions.axisRangeDateFormat, axis.min) : axis.min,
|
rangeTo: axis.isDatetimeAxis ? chart.time.dateFormat(a11yOptions.axisRangeDateFormat, axis.max) : axis.max
|
});
|
}
|
|
});
|
|
exports.default = InfoRegionComponent;
|
