Remove accessibility CSS; Auto focus (#583)

MathuraMG · catarak · commit 3acefe4709bc · 2018-03-01T13:28:43.000-05:00
* Change accessibility example links * added library to iframe * changed preview to add accessible elements to iframe * add library only when accesible output is seleceted * focus on iframe when plaing * css * deleted accessibleOutput.jsx and edited IDEView to integrate accessibility library * deleted comments * fix package * Moved CSS to library and removed section from file.js (#2) * Remove gitmodule (#509) * remove git modules * removed submodule and replaced interceptor for library * removed submodule and replaced interceptor for library (#510) * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * Fixes #508 (#539) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * Fixes #508 (#545) * removed submodule and replaced interceptor for library * deleted comments * deleted jquery * deleted interceptor folder * delete interceptor * added jquery * removed jquery and updated accessible library cdn * remove empty divs from files.js * fix merge error * remove empty divs from files.js * moved accessible output css * removed css, added aria-label, preliminary cdn update * removed section from iframe * updated cdn * add autofocus; remove CSS
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
@@ -205,16 +205,11 @@ class PreviewFrame extends React.Component {
     ];
     const accessiblelib = sketchDoc.createElement('script');
     accessiblelib.setAttribute(
-      'src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js'
+      'src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/298ccdf6/dist/p5-accessibility.js'
     );
     const accessibleOutputs = sketchDoc.createElement('section');
     accessibleOutputs.setAttribute('id', 'accessible-outputs');
-    accessibleOutputs.style.position = 'absolute';
-    accessibleOutputs.style.left = '-1000px';
-    accessibleOutputs.style.top = 'auto';
-    accessibleOutputs.style.width = '1px';
-    accessibleOutputs.style.height = '1px';
-    accessibleOutputs.style.overflow = 'hidden';
+    accessibleOutputs.setAttribute('aria-label', 'accessible-output');
     if (this.props.textOutput) {
       sketchDoc.body.appendChild(accessibleOutputs);
       sketchDoc.body.appendChild(accessiblelib);
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
@@ -60,7 +60,11 @@ class Toolbar extends React.Component {
       <div className="toolbar">
         <button
           className="toolbar__play-sketch-button"
-          onClick={this.props.startAccessibleSketch}
+          onClick={() => {
+            this.props.startAccessibleSketch();
+            this.props.setTextOutput(true);
+            this.props.setGridOutput(true);
+          }}
           aria-label="play sketch"
           disabled={this.props.infiniteLoop}
         >
@@ -169,6 +173,8 @@ Toolbar.propTypes = {
   infiniteLoop: PropTypes.bool.isRequired,
   autorefresh: PropTypes.bool.isRequired,
   setAutorefresh: PropTypes.func.isRequired,
+  setTextOutput: PropTypes.func.isRequired,
+  setGridOutput: PropTypes.func.isRequired,
   startSketch: PropTypes.func.isRequired,
   startAccessibleSketch: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
@@ -1,11 +1,11 @@
 import objectID from 'bson-objectid';
 import * as ActionTypes from '../../../constants';
 
-const defaultSketch = `function setup() { 
+const defaultSketch = `function setup() {
   createCanvas(400, 400);
-} 
+}
 
-function draw() { 
+function draw() {
   background(220);
 }`;
 
@@ -22,7 +22,7 @@ const defaultHTML =
   </head>
   <body>
     <script src="sketch.js"></script>
-    </body>
+  </body>
 </html>
 `;
 
