diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx index 43f229fa2d..f8d5853f99 100644 --- a/client/modules/Preview/EmbedFrame.jsx +++ b/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/p5.accessibility@0.1.1/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');