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 = {};