add Chart2Music keyboard and sound accessibility features

package.json

@@ -77,6 +77,7 @@
  "@turf/bbox": "^6.4.0",
  "@turf/centroid": "^6.0.2",
  "canvas-fit": "^1.5.0",
+ "chart2music": "^1.11.0",
  "color-alpha": "1.0.4",
  "color-normalize": "1.5.0",
  "color-parse": "1.3.8",

src/plot_api/accessibility.js

@@ -0,0 +1,71 @@
+"use strict";
+import c2mChart from "chart2music";
+
+export function enable (gd) {
+
+ const c2mData = {};
+ const labels = [];
+
+ const fullData = gd._fullData;
+
+ for(var i = 0; i < fullData.length; i++) {
+ var trace = fullData[i] ?? {};
+ var {type, x = [], y = [], name = i, text = []} = trace;
+ if(type === 'scatter') {
+ var traceData = [];
+ if ('y' in trace) {
+ for(var p = 0; p < y.length; p++) {
+ traceData.push(
+ {
+ x: x.length > 0 ? x[p] : p,
+ y: y[p],
+ label: text[p] ?? p
+ })
+ }
+ c2mData[name] = traceData;
+ labels.push(name);
+ }
+ }
+ else {
+ // 'Accessibility not implemented for trace type: ' + trace.type
+ return;
+ }
+ }
+
+ var closed_captions = document.createElement('div');
+ closed_captions.id = 'cc';
+ closed_captions.className = 'closed_captions';
+ gd.appendChild(closed_captions);
+
+ const {
+ title: {text: title_text = ''} = {},
+ xaxis: {title: {text: xaxis_text = ''} = {}} = {},
+ yaxis: {title: {text: yaxis_text = ''} = {}} = {},
+ } = gd._fullLayout;
+
+ c2mChart({
+ title: title_text,
+ type: "line",
+ axes: {
+ x: {
+ label: xaxis_text
+ },
+ y: {
+ label: yaxis_text
+ }
+ },
+ element: gd,
+ cc: closed_captions,
+ data: c2mData,
+ options: {
+ onFocusCallback: ({slice, index}) => {
+ Plotly.Fx.hover(gd, [{
+ curveNumber: labels.indexOf(slice), 
+ pointNumber: index
+ }])
+ },
+ ...gd._context.chart2musicOptions
+ },
+ info: gd._context.chart2musicInfo
+ }); 
+};

src/plot_api/plot_api.js

@@ -26,6 +26,7 @@ var manageArrays = require('./manage_arrays');
 var helpers = require('./helpers');
 var subroutines = require('./subroutines');
 var editTypes = require('./edit_types');
+var accessibility = require('./accessibility');
 
 var AX_NAME_PATTERN = require('../plots/cartesian/constants').AX_NAME_PATTERN;
 
@@ -376,10 +377,13 @@ function _doPlot(gd, data, layout, config) {
  // calculated. Would be much better to separate margin calculations from
  // component drawing - see https://github.com/plotly/plotly.js/issues/2704
  Plots.doAutoMargin,
- saveRangeInitialForInsideTickLabels,
- Plots.previousPromises
+ saveRangeInitialForInsideTickLabels
  );
 
+ if(gd._context.chart2music) seq.push(accessibility.enable);
+
+ seq.push(Plots.previousPromises);
+
  function saveRangeInitialForInsideTickLabels(gd) {
  if(gd._fullLayout._insideTickLabelsAutorange) {
  if(graphWasEmpty) Axes.saveRangeInitial(gd, true);

src/plot_api/plot_config.js

@@ -471,7 +471,25 @@ var configAttributes = {
  'instead of MM/DD/YYYY). Currently `grouping` and `currency` are ignored',
  'for our automatic number formatting, but can be used in custom formats.'
  ].join(' ')
- }
+ },
+
+ chart2music: {
+ valType: 'boolean',
+ dflt: true,
+ description: 'Whether or not to enable chart2music keyboard and sound accessibility',
+ },
+
+ chart2musicOptions: {
+ valType: 'any',
+ dflt: {},
+ description: 'Additional options to pass to the chart2music API. See https://www.chart2music.com/docs/API/Config',
+ },
+
+ chart2musicInfo: {
+ valType: 'any',
+ dflt: {},
+ description: 'Info to pass to the chart2music API. See https://www.chart2music.com/docs/API/Config',
+ },
 };
 
 var dfltConfig = {};