From 3acefe4709bcb57236e8b4f8bcbe639d5a18aa87 Mon Sep 17 00:00:00 2001
From: Mathura MG <mmg9291@gmail.com>
Date: Thu, 1 Mar 2018 13:28:43 -0500
Subject: [PATCH] Remove accessibility CSS; Auto focus (#583)

* 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
---
 client/modules/IDE/components/PreviewFrame.jsx | 9 ++-------
 client/modules/IDE/components/Toolbar.jsx      | 8 +++++++-
 client/modules/IDE/reducers/files.js           | 8 ++++----
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
index 93d83aec..f153ac56 100644
--- 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
index 6cca4631..d237a08f 100644
--- 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
index 2e1c9163..9d51f67b 100644
--- 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>
 `;