Merge pull request #64 from MathuraMG/accessibility

add on focus

client/modules/IDE/components/SketchList.js

@@ -11,11 +11,12 @@ const exitUrl = require('../../../images/exit.svg');
 class SketchList extends React.Component {
   componentDidMount() {
     this.props.getProjects(this.props.username);
+    document.getElementById('sketchlist').focus();
   }
 
   render() {
     return (
-      <div className="sketch-list">
+      <section className="sketch-list" aria-label="project list" tabIndex="0" role="main" id="sketchlist">
         <header className="sketch-list__header">
           <h2>Sketches</h2>
           <button className="sketch-list__exit-button" onClick={this.props.closeSketchList}>
@@ -42,7 +43,7 @@ class SketchList extends React.Component {
             </tbody>
           </table>
         </div>
-      </div>
+      </section>
     );
   }
 }

client/modules/IDE/components/TextOutput.js

@@ -17,14 +17,14 @@ class TextOutput extends React.Component {
         </section>
         <p
           tabIndex="0"
-          role="region"
+          role="main"
           id="textOutput-content-summary"
           aria-label="text output summary"
         >
         </p>
         <table
           tabIndex="0"
-          role="region"
+          role="main"
           id="textOutput-content-details"
           aria-label="text output summary details"
         >