Fix focus switch to accessible text output (#318)

* Change accessibility example links

* ensure we focus on text output

client/modules/IDE/components/TextOutput.jsx

@@ -1,9 +1,15 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 
 class TextOutput extends React.Component {
   componentDidMount() {
     this.canvasTextOutput.focus();
   }
+  componentDidUpdate(prevProps) {
+    // if the user explicitly clicks on the play button, want to refocus on the text output
+    if (this.props.isPlaying && this.props.previewIsRefreshing) {
+      this.canvasTextOutput.focus();
+    }
+  }
   render() {
     return (
       <section
@@ -43,4 +49,9 @@ class TextOutput extends React.Component {
   }
 }
 
+TextOutput.propTypes = {
+  isPlaying: PropTypes.bool.isRequired,
+  previewIsRefreshing: PropTypes.bool.isRequired
+};
+
 export default TextOutput;

client/modules/IDE/pages/IDEView.jsx

@@ -329,7 +329,10 @@ class IDEView extends React.Component {
                   {(() => {
                     if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
                       return (
-                        <TextOutput />
+                        <TextOutput
+                          isPlaying={this.props.ide.isPlaying}
+                          previewIsRefreshing={this.props.ide.previewIsRefreshing}
+                        />
                       );
                     }
                     return '';