add focus and labels

client/modules/IDE/components/About.js

@@ -4,13 +4,17 @@ const exitUrl = require('../../../images/exit.svg');
 import { browserHistory } from 'react-router';
 
 class About extends React.Component {
+  componentDidMount() {
+    this.refs.about.focus();
+  }
+
   closeAboutModal() {
     browserHistory.goBack();
   }
 
   render() {
     return (
-      <div className="about">
+      <section className="about" ref="about" tabIndex="0">
         <header className="about__header">
           <h2>About</h2>
           <button className="about__exit-button" onClick={this.closeAboutModal}>
@@ -33,7 +37,7 @@ class About extends React.Component {
             > report a bug.</a>
           </p>
         </div>
-      </div>
+      </section>
     );
   }
 }

client/modules/IDE/components/Editor.js

@@ -148,6 +148,7 @@ class Editor extends React.Component {
       >
         <button
           className="editor__options-button"
+          aria-label="editor options"
           tabIndex="0"
           onClick={(e) => {
             e.target.focus();
@@ -157,7 +158,7 @@ class Editor extends React.Component {
         >
           <InlineSVG src={downArrowUrl} />
         </button>
-        <ul className="editor__options">
+        <ul className="editor__options" title="editor options">
           <li>
             <a onClick={this.tidyCode}>Tidy</a>
           </li>

client/modules/IDE/components/ShareModal.js

@@ -2,13 +2,17 @@ import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 const exitUrl = require('../../../images/exit.svg');
 
-function ShareModal(props) {
+class ShareModal extends React.Component {
+  componentDidMount() {
+    this.refs.shareModal.focus();
+  }
+  render() {
     const hostname = window.location.origin;
     return (
-    <section className="share-modal">
+      <section className="share-modal" ref="shareModal" tabIndex="0">
         <header className="share-modal__header">
           <h2>Share Sketch</h2>
-        <button className="about__exit-button" onClick={props.closeShareModal}>
+          <button className="about__exit-button" onClick={this.props.closeShareModal}>
             <InlineSVG src={exitUrl} alt="Close Share Overlay" />
           </button>
         </header>
@@ -17,7 +21,7 @@ function ShareModal(props) {
           <input
             type="text"
             className="share-modal__input"
-          value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
+            value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
           />
         </div>
         <div className="share-modal__section">
@@ -25,7 +29,7 @@ function ShareModal(props) {
           <input
             type="text"
             className="share-modal__input"
-          value={`${hostname}/full/${props.projectId}`}
+            value={`${hostname}/full/${this.props.projectId}`}
           />
         </div>
         <div className="share-modal__section">
@@ -33,11 +37,12 @@ function ShareModal(props) {
           <input
             type="text"
             className="share-modal__input"
-          value={`${hostname}/projects/${props.projectId}`}
+            value={`${hostname}/projects/${this.props.projectId}`}
           />
         </div>
       </section>
     );
+  }
 }
 
 ShareModal.propTypes = {