Merge pull request #2694 from nickmcintyre/accessibility

Fix screen reader features

Author: raclim

client/modules/Preview/EmbedFrame.jsx

@@ -224,27 +224,23 @@ function injectLocalFiles(files, htmlFile, options) {
   resolveScripts(sketchDoc, resolvedFiles);
   resolveStyles(sketchDoc, resolvedFiles);
 
-  const accessiblelib = sketchDoc.createElement('script');
-  accessiblelib.setAttribute(
-    'src',
-    'https://cdn.jsdelivr.net/gh/processing/[email protected]/dist/p5-accessibility.js'
-  );
-  const accessibleOutputs = sketchDoc.createElement('section');
-  accessibleOutputs.setAttribute('id', 'accessible-outputs');
-  accessibleOutputs.setAttribute('aria-label', 'accessible-output');
   if (textOutput || gridOutput) {
-    sketchDoc.body.appendChild(accessibleOutputs);
-    sketchDoc.body.appendChild(accessiblelib);
+    const scriptElement = sketchDoc.createElement('script');
+    let textCode = '';
     if (textOutput) {
-      const textSection = sketchDoc.createElement('section');
-      textSection.setAttribute('id', 'textOutput-content');
-      sketchDoc.getElementById('accessible-outputs').appendChild(textSection);
+      textCode = 'if (!this._accessibleOutputs.text) this.textOutput();';
     }
+    let gridCode = '';
     if (gridOutput) {
-      const gridSection = sketchDoc.createElement('section');
-      gridSection.setAttribute('id', 'tableOutput-content');
-      sketchDoc.getElementById('accessible-outputs').appendChild(gridSection);
+      gridCode = 'if (!this._accessibleOutputs.grid) this.gridOutput();';
     }
+    const fxn = `p5.prototype.ensureAccessibleCanvas = function _ensureAccessibleCanvas() {
+  ${textCode}
+  ${gridCode}
+};
+p5.prototype.registerMethod('afterSetup', p5.prototype.ensureAccessibleCanvas);`;
+    scriptElement.innerHTML = fxn;
+    sketchDoc.head.appendChild(scriptElement);
   }
 
   const previewScripts = sketchDoc.createElement('script');