From 46d58014ff2b96e9fc659316192ddc1f77e12d00 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Wed, 28 Sep 2016 12:09:42 -0400
Subject: [PATCH] add focus and labels

---
 client/modules/IDE/components/About.js      |  8 ++-
 client/modules/IDE/components/Editor.js     |  3 +-
 client/modules/IDE/components/ShareModal.js | 77 +++++++++++----------
 3 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/client/modules/IDE/components/About.js b/client/modules/IDE/components/About.js
index 0959ffe5..534c6642 100644
--- a/client/modules/IDE/components/About.js
+++ b/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>
     );
   }
 }
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index ae8c415b..93508ed2 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/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>
diff --git a/client/modules/IDE/components/ShareModal.js b/client/modules/IDE/components/ShareModal.js
index 7b54fbf4..661a1ed6 100644
--- a/client/modules/IDE/components/ShareModal.js
+++ b/client/modules/IDE/components/ShareModal.js
@@ -2,42 +2,47 @@ import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 const exitUrl = require('../../../images/exit.svg');
 
-function ShareModal(props) {
-  const hostname = window.location.origin;
-  return (
-    <section className="share-modal">
-      <header className="share-modal__header">
-        <h2>Share Sketch</h2>
-        <button className="about__exit-button" onClick={props.closeShareModal}>
-          <InlineSVG src={exitUrl} alt="Close Share Overlay" />
-        </button>
-      </header>
-      <div className="share-modal__section">
-        <label className="share-modal__label">Embed</label>
-        <input
-          type="text"
-          className="share-modal__input"
-          value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
-        />
-      </div>
-      <div className="share-modal__section">
-        <label className="share-modal__label">Fullscreen</label>
-        <input
-          type="text"
-          className="share-modal__input"
-          value={`${hostname}/full/${props.projectId}`}
-        />
-      </div>
-      <div className="share-modal__section">
-        <label className="share-modal__label">Edit</label>
-        <input
-          type="text"
-          className="share-modal__input"
-          value={`${hostname}/projects/${props.projectId}`}
-        />
-      </div>
-    </section>
-  );
+class ShareModal extends React.Component {
+  componentDidMount() {
+    this.refs.shareModal.focus();
+  }
+  render() {
+    const hostname = window.location.origin;
+    return (
+      <section className="share-modal" ref="shareModal" tabIndex="0">
+        <header className="share-modal__header">
+          <h2>Share Sketch</h2>
+          <button className="about__exit-button" onClick={this.props.closeShareModal}>
+            <InlineSVG src={exitUrl} alt="Close Share Overlay" />
+          </button>
+        </header>
+        <div className="share-modal__section">
+          <label className="share-modal__label">Embed</label>
+          <input
+            type="text"
+            className="share-modal__input"
+            value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
+          />
+        </div>
+        <div className="share-modal__section">
+          <label className="share-modal__label">Fullscreen</label>
+          <input
+            type="text"
+            className="share-modal__input"
+            value={`${hostname}/full/${this.props.projectId}`}
+          />
+        </div>
+        <div className="share-modal__section">
+          <label className="share-modal__label">Edit</label>
+          <input
+            type="text"
+            className="share-modal__input"
+            value={`${hostname}/projects/${this.props.projectId}`}
+          />
+        </div>
+      </section>
+    );
+  }
 }
 
 ShareModal.propTypes = {