accessibility in config

Author: Alistair-Welch

src/plot_api/accessibility.js

@@ -2,72 +2,83 @@
 
 import c2mChart from "chart2music";
 
+const supportedAccessibilityLibraries = ['chart2music'];
+
 export function enable (gd) {
 
-    const c2mData = {};
-    const labels = [];
-    
-    const fullData = gd._fullData;
+    const {library, options} = gd._context.accessibility;
+    if (!supportedAccessibilityLibraries.includes(library)) {
+        // 'Accessibility not implemented for library: ' + library
+        return;
+    }
+
+    if (library === 'chart2music') {
+        const c2mData = {};
+        const labels = [];
+        const info = options.info;
+        delete options.info;
+        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
-                        })
+        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);
                 }
-                c2mData[name] = traceData;
-                labels.push(name);
             }
-        }
-        else {
-            // 'Accessibility not implemented for trace type: ' + trace.type
-            return;
+            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);
+        
+        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
+        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
+                }
             },
-            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
-            }])
+            element: gd,
+            cc: closed_captions,
+            data: c2mData,
+            options: {
+                onFocusCallback: ({slice, index}) => {
+                Plotly.Fx.hover(gd, [{
+                    curveNumber: labels.indexOf(slice), 
+                    pointNumber: index
+                }])
+                },
+                ...options
             },
-            ...gd._context.chart2musicOptions
-        },
-        info: gd._context.chart2musicInfo
-    }
-    );      
+            info: info
+        }
+        );      
+    };
 };

src/plot_api/plot_api.js

@@ -380,7 +380,7 @@ function _doPlot(gd, data, layout, config) {
         saveRangeInitialForInsideTickLabels
     );
 
-    if(gd._context.chart2music) seq.push(accessibility.enable);
+    if(gd._context.accessibility.enabled) seq.push(accessibility.enable);
 
     seq.push(Plots.previousPromises);
 

src/plot_api/plot_config.js

@@ -473,22 +473,16 @@ var configAttributes = {
         ].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: {
+    accessibility: {
         valType: 'any',
-        dflt: {},
-        description: 'Info to pass to the chart2music API. See https://www.chart2music.com/docs/API/Config',
+        dflt: {
+            library: 'chart2music',
+            enabled: true,
+            options: {info: {}}
+        },
+        description: ['Accessibility options: which library to use; whether to enable and the options to pass to the library.',
+        'chart2music is supported and options here include Options and Info from https://www.chart2music.com/docs/API/Config. '
+    ].join(' ')
     },
 };