Made export-data output accessible tables

js/modules/screen-reader.src.js

@@ -690,13 +690,7 @@ H.Chart.prototype.callbacks.push(function (chart) {
 		titleId = 'highcharts-title-' + chart.index,
 		tableId = 'highcharts-data-table-' + chart.index,
 		hiddenSectionId = 'highcharts-information-region-' + chart.index,
-		chartTitle = options.title.text || 'Chart',
-		oldColumnHeaderFormatter = (
-			options.exporting &&
-			options.exporting.csv &&
-			options.exporting.csv.columnHeaderFormatter
-		),
-		topLevelColumns = [];
+		chartTitle = options.title.text || 'Chart';
 
 	// Add SVG title/desc tags
 	titleElement.textContent = htmlencode(chartTitle);
@@ -762,96 +756,13 @@ H.Chart.prototype.callbacks.push(function (chart) {
 	// Add top-secret screen reader region
 	chart.addScreenReaderRegion(hiddenSectionId, tableId);
 
-
-	/* Wrap table functionality from export-data */
-	/* TODO: Can't we just do this in export-data? */
-
-	// Keep track of columns
-	merge(true, options.exporting, {
-		csv: {
-			columnHeaderFormatter: function (item, key, keyLength) {
-				if (!item) {
-					return 'Category';
-				}
-				if (item instanceof H.Axis) {
-					return (item.options.title && item.options.title.text) ||
-						(item.isDatetimeAxis ? 'DateTime' : 'Category');
-				}
-				var prevCol = topLevelColumns[topLevelColumns.length - 1];
-				if (keyLength > 1) {
-					// We need multiple levels of column headers
-					// Populate a list of column headers to add in addition to
-					// the ones added by export-data
-					if ((prevCol && prevCol.text) !== item.name) {
-						topLevelColumns.push({
-							text: item.name,
-							span: keyLength
-						});
-					}
-				}
-				if (oldColumnHeaderFormatter) {
-					return oldColumnHeaderFormatter.call(
-						this,
-						item,
-						key,
-						keyLength
-					);
-				}
-				return keyLength > 1 ? key : item.name;
-			}
-		}
-	});
-
-	// Add ID and title/caption to table HTML
+	// Add ID and summary attr to table HTML
 	H.wrap(chart, 'getTable', function (proceed) {
 		return proceed.apply(this, Array.prototype.slice.call(arguments, 1))
 			.replace(
 				'<table>',
 				'<table id="' + tableId + '" summary="Table representation ' +
-					'of chart"><caption>' + chartTitle + '</caption>'
+					'of chart">'
 			);
 	});
-
-	// Add accessibility attributes and top level columns
-	H.wrap(chart, 'viewData', function (proceed) {
-		var divExists = this.dataTableDiv;
-		proceed.apply(this, Array.prototype.slice.call(arguments, 1));
-		if (!divExists) {
-			var table = doc.getElementById(tableId),
-				head = table.getElementsByTagName('thead')[0],
-				body = table.getElementsByTagName('tbody')[0],
-				firstRow = head.firstChild.children,
-				columnHeaderRow = '<tr><td></td>',
-				cell,
-				newCell;
-
-			// Make table focusable by script
-			table.setAttribute('tabindex', '-1');
-
-			// Create row headers
-			each(body.children, function (el) {
-				cell = el.firstChild;
-				newCell = doc.createElement('th');
-				newCell.setAttribute('scope', 'row');
-				newCell.innerHTML = cell.innerHTML;
-				cell.parentNode.replaceChild(newCell, cell);
-			});
-
-			// Set scope for column headers
-			each(firstRow, function (el) {
-				if (el.tagName === 'TH') {
-					el.setAttribute('scope', 'col');
-				}
-			});
-
-			// Add top level columns
-			if (topLevelColumns.length) {
-				each(topLevelColumns, function (col) {
-					columnHeaderRow += '<th scope="col" colspan="' + col.span +
-						'">' + col.text + '</th>';
-				});
-				head.insertAdjacentHTML('afterbegin', columnHeaderRow);
-			}
-		}
-	});
 });

samples/highcharts/export-data/multilevel-table/demo.css

@@ -0,0 +1,34 @@
+.chart-outer {
+    max-width: 800px;
+    margin: 2em auto;
+}
+#container {    
+    height: 300px;
+    margin-top: 2em;
+    min-width: 380px;
+}
+.highcharts-table-caption {
+    margin-bottom: 5px;
+    font-family: sans-serif;
+    font-size: 14pt;
+}
+.highcharts-data-table table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    background: white;
+    min-width: 100%;
+    margin-top: 10px;
+}
+.highcharts-data-table td, .highcharts-data-table th {
+    text-align: center;
+    font-family: sans-serif;
+    font-size: 10pt;
+    border: 1px solid silver;
+    padding: 0.5em;
+}
+.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
+    background: #f8f8f8;
+}
+.highcharts-data-table tr:hover {
+    background: #eff;
+}

samples/highcharts/export-data/multilevel-table/demo.details

@@ -0,0 +1,7 @@
+---
+ name: Highcharts Demo
+ authors:
+   - Øystein Moseng
+ js_wrap: b
+ skipTest: true
+...

samples/highcharts/export-data/multilevel-table/demo.html

@@ -0,0 +1,12 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/export-data.js"></script>
+
+<div class="chart-outer">
+    <div id="container"></div>
+    <!-- data table is inserted here -->
+</div>
+
+
+

samples/highcharts/export-data/multilevel-table/demo.js

@@ -0,0 +1,81 @@
+var ranges = [
+        [1246406400000, 14.3, 27.7],
+        [1246492800000, 14.5, 27.8],
+        [1246579200000, 15.5, 29.6],
+        [1246665600000, 16.7, 30.7],
+        [1246752000000, 16.5, 25.0],
+        [1246838400000, 17.8, 25.7]
+    ],
+    averages = [
+        [1246406400000, 21.5],
+        [1246492800000, 22.1],
+        [1246579200000, 23],
+        [1246665600000, 23.8],
+        [1246752000000, 21.4],
+        [1246838400000, 21.3]
+    ];
+
+Highcharts.chart('container', {
+    exporting: {
+        showTable: true,
+        tableCaption: 'Data table',
+        csv: {
+            /* // Uncomment for custom column header formatter.
+            // This function is called for each column header.
+            columnHeaderFormatter: function (item, key) {
+                if (!item || item instanceof Highcharts.Axis) {
+                    return item.options.title.text;
+                }
+                // Item is not axis, now we are working with series.
+                // Key is the property on the series we show in this column.
+                return {
+                    topLevelColumnTitle: 'Temperature',
+                    columnTitle: key === 'y' ? 'avg' : key
+                };
+            },
+            // */
+            dateFormat: '%Y-%m-%d'
+        }
+    },
+
+    title: {
+        text: 'Temperature forecast'
+    },
+
+    tooltip: {
+        shared: true,
+        valueSuffix: '°C'
+    },
+
+    legend: {
+        enabled: false
+    },
+
+    xAxis: {
+        type: 'datetime',
+        title: {
+            text: 'Day'
+        }
+    },
+
+    yAxis: {
+        title: {
+            text: 'Temperature'
+        },
+        labels: {
+            format: '{value}°C'
+        }
+    },
+
+    series: [{
+        name: 'Temperature',
+        data: averages
+    }, {
+        name: 'Range',
+        data: ranges,
+        color: Highcharts.getOptions().colors[0],
+        type: 'arearange',
+        linkedTo: ':previous',
+        fillOpacity: 0.3
+    }]
+});

samples/unit-tests/export-data/basics/demo.js

@@ -509,7 +509,8 @@ QUnit.test('Missing data in first series (#78)', function (assert) {
             // accessibility module added.
             .replace(/<table[^>]+>/g, '<table>')
             .replace('<caption>Chart title</caption>', ''),
-        "<table><thead><tr><th class=\"text\">Category</th><th class=\"text\">Drop 2</th><th class=\"text\">Full</th></tr></thead><tbody><tr><td class=\"number\">0</td><td class=\"number\">1</td><td class=\"number\">1</td></tr><tr><td class=\"number\">1</td><td class=\"number\">1</td><td class=\"number\">1</td></tr><tr><td class=\"number\">2</td><td class=\"text\"></td><td class=\"number\">2</td></tr><tr><td class=\"number\">3</td><td class=\"number\">3</td><td class=\"number\">3</td></tr><tr><td class=\"number\">4</td><td class=\"number\">4</td><td class=\"number\">4</td></tr></tbody></table>",
+        '<table><caption class="highcharts-table-caption">Chart title</caption><thead><tr><th scope="col" class="text">Category</th><th scope="col" class="text">Drop 2</th><th scope="col" class="text">Full</th></tr></thead><tbody><tr><th scope="row" class="empty"></th><td class="number">1</td><td class="number">1</td></tr><tr><th scope="row" class="number">1</th><td class="number">1</td><td class="number">1</td></tr><tr><th scope="row" class="number">2</th>' +
+        '<td class="empty"></td><td class="number">2</td></tr><tr><th scope="row" class="number">3</th><td class="number">3</td><td class="number">3</td></tr><tr><th scope="row" class="number">4</th><td class="number">4</td><td class="number">4</td></tr></tbody></table>',
         'Empty data in table'
     );
 

samples/unit-tests/export-data/multilevel-table/demo.css

@@ -0,0 +1,5 @@
+#container {
+    max-width: 800px;
+    height: 400px;
+    margin: 1em auto;
+}

samples/unit-tests/export-data/multilevel-table/demo.details

@@ -0,0 +1,9 @@
+---
+ name: Highcharts Demo
+ authors:
+   - Torstein Hønsi
+ resources:
+   - https://code.jquery.com/qunit/qunit-2.0.1.js
+   - https://code.jquery.com/qunit/qunit-2.0.1.css
+ js_wrap: b
+...

samples/unit-tests/export-data/multilevel-table/demo.html

@@ -0,0 +1,10 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
+<script src="https://code.highcharts.com/modules/bullet.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<script src="https://code.highcharts.com/modules/export-data.js"></script>
+
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+<div id="container"></div>
+