From baec9e9e8708a9cd7f68a860267834730daaaac1 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Wed, 13 Jul 2016 11:59:47 -0400
Subject: [PATCH 1/9] add aria-tags and titles

---
 client/components/Nav.js                     | 6 +++---
 client/modules/IDE/components/Editor.js      | 3 ++-
 client/modules/IDE/components/Preferences.js | 6 +++---
 client/modules/IDE/components/Sidebar.js     | 2 +-
 client/modules/IDE/components/Toolbar.js     | 2 +-
 package.json                                 | 2 +-
 server/server.js                             | 2 +-
 7 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index 85c82bb2..193a9b4d 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -3,8 +3,8 @@ import { Link } from 'react-router';
 
 function Nav(props) {
   return (
-    <nav className="nav">
-      <ul className="nav__items-left">
+    <nav className="nav" role="navigation">
+      <ul className="nav__items-left" title="project-menu">
         <li className="nav__item">
           <a
             className="nav__new"
@@ -29,7 +29,7 @@ function Nav(props) {
           </p>
         </li>
       </ul>
-      <ul className="nav__items-right">
+      <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
           {props.user.authenticated && <p>Hello, {props.user.username}!</p>}
           {!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index fa4fe305..f85e59bd 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -11,6 +11,7 @@ class Editor extends React.Component {
       value: this.props.file.content,
       lineNumbers: true,
       styleActiveLine: true,
+      inputStyle: 'contenteditable',
       mode: 'javascript'
     });
     this._cm.on('change', () => { // eslint-disable-line
@@ -45,7 +46,7 @@ class Editor extends React.Component {
   _cm: CodeMirror.Editor
 
   render() {
-    return <div ref="container" className="editor-holder"></div>;
+    return <div ref="container" className="editor-holder" tabIndex="0" title="code-editor"></div>;
   }
 }
 
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 961f4101..f80ad5d0 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -20,7 +20,7 @@ function Preferences(props) {
     'preference__option--selected': !props.isTabIndent
   });
   return (
-    <div className={preferencesContainerClass} tabIndex="0">
+    <div className={preferencesContainerClass} tabIndex="0" title="preference-menu" id="preferences-menu">
       <div className="preferences__heading">
         <h2 className="preferences__title">Preferences</h2>
         <button className="preferences__exit-button" onClick={props.closePreferences}>
@@ -35,7 +35,7 @@ function Preferences(props) {
           <h6 className="preference__label">Decrease</h6>
         </button>
 
-        <input className="preference__value" value={props.fontSize} onChange={props.updateFont}></input>
+        <input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.fontSize} onChange={props.updateFont}></input>
         <button className="preference__minus-button" onClick={props.increaseFont}>
           <Isvg src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
@@ -48,7 +48,7 @@ function Preferences(props) {
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <input className="preference__value" value={props.indentationAmount} onChange={props.updateIndentation}></input>
+        <input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.indentationAmount} onChange={props.updateIndentation}></input>
         <button className="preference__minus-button" onClick={props.increaseIndentation}>
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index cb8c276f..22184cc0 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 function Sidebar(props) {
   return (
     <section className="sidebar">
-      <ul className="sidebar__file-list">
+      <ul className="sidebar__file-list" title="file-list">
         {props.files.map(file => {
           let itemClass = classNames({
             'sidebar__file-item': true,
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index fd8d3289..b0f61ac2 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -41,7 +41,7 @@ function Toolbar(props) {
           {props.projectName}
         </span>
       </div>
-      <button className={preferencesButtonClass} onClick={props.openPreferences}>
+      <button className={preferencesButtonClass} onClick={props.openPreferences} role="menuitem" aria-haspopup="true" aria-owns="preferences-menu">
         <Isvg src={preferencesUrl} alt="Show Preferences" />
       </button>
     </div>
diff --git a/package.json b/package.json
index dca229de..9fc1ef6b 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "bson-objectid": "^1.1.4",
     "classnames": "^2.2.5",
     "codemirror": "^5.14.2",
-    "connect-mongo": "^1.2.0",
+    "connect-mongo": "^1.0.0",
     "cookie-parser": "^1.4.1",
     "dotenv": "^2.0.0",
     "escape-string-regexp": "^1.0.5",
diff --git a/server/server.js b/server/server.js
index 99879244..d9a8ea9d 100644
--- a/server/server.js
+++ b/server/server.js
@@ -3,7 +3,7 @@ import mongoose from 'mongoose';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import session from 'express-session';
-const MongoStore = require('connect-mongo')(session);
+const MongoStore = require('connect-mongo/es5')(session);
 import passport from 'passport';
 import path from 'path';
 

From 1332b7abad63204de36329b61b495ffc8d62f1f3 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Wed, 13 Jul 2016 12:59:58 -0400
Subject: [PATCH 2/9] convert input to integer

---
 client/modules/IDE/actions/preferences.js  | 2 +-
 client/modules/IDE/reducers/preferences.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js
index 4a3d0c9c..6314ac7c 100644
--- a/client/modules/IDE/actions/preferences.js
+++ b/client/modules/IDE/actions/preferences.js
@@ -44,7 +44,7 @@ export function decreaseIndentation() {
   };
 }
 
-export function updateIndentation() {
+export function updateIndentation(event) {
   const value = event.target.value;
   return {
     type: ActionTypes.UPDATE_INDENTATION,
diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js
index 0f7b084c..dd5b6073 100644
--- a/client/modules/IDE/reducers/preferences.js
+++ b/client/modules/IDE/reducers/preferences.js
@@ -27,7 +27,7 @@ const preferences = (state = initialState, action) => {
       });
     case ActionTypes.UPDATE_FONTSIZE:
       return Object.assign({}, state, {
-        fontSize: action.value
+        fontSize: parseInt(action.value, 10)
       });
     case ActionTypes.INCREASE_INDENTATION:
       return Object.assign({}, state, {
@@ -39,7 +39,7 @@ const preferences = (state = initialState, action) => {
       });
     case ActionTypes.UPDATE_INDENTATION:
       return Object.assign({}, state, {
-        indentationAmount: action.value
+        indentationAmount: parseInt(action.value, 10)
       });
     case ActionTypes.INDENT_WITH_TAB:
       return Object.assign({}, state, {

From d4d3d354b3e14be2a86ab7b49faa1475afcf5efe Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Wed, 13 Jul 2016 13:03:30 -0400
Subject: [PATCH 3/9] remove dev variables

---
 package.json     | 2 +-
 server/server.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 9fc1ef6b..dca229de 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "bson-objectid": "^1.1.4",
     "classnames": "^2.2.5",
     "codemirror": "^5.14.2",
-    "connect-mongo": "^1.0.0",
+    "connect-mongo": "^1.2.0",
     "cookie-parser": "^1.4.1",
     "dotenv": "^2.0.0",
     "escape-string-regexp": "^1.0.5",
diff --git a/server/server.js b/server/server.js
index d9a8ea9d..99879244 100644
--- a/server/server.js
+++ b/server/server.js
@@ -3,7 +3,7 @@ import mongoose from 'mongoose';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
 import session from 'express-session';
-const MongoStore = require('connect-mongo/es5')(session);
+const MongoStore = require('connect-mongo')(session);
 import passport from 'passport';
 import path from 'path';
 

From b4c15e70df4ef38360489f35cc8fe6a804702dd7 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Wed, 13 Jul 2016 15:23:48 -0400
Subject: [PATCH 4/9] add more roles + remove menu roles

---
 client/modules/IDE/components/Editor.js       |  2 +-
 client/modules/IDE/components/Preferences.js  | 22 ++++++++++++++++---
 client/modules/IDE/components/PreviewFrame.js |  2 ++
 client/modules/IDE/components/Toolbar.js      |  5 ++++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 92ccd7b9..e8f24f4a 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -47,7 +47,7 @@ class Editor extends React.Component {
   _cm: CodeMirror.Editor
 
   render() {
-    return <div ref="container" className="editor-holder" tabIndex="0" title="code-editor"></div>;
+    return <div ref="container" className="editor-holder" tabIndex="0" title="code editor" role="region"></div>;
   }
 }
 
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index f80ad5d0..119dd2e2 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -20,7 +20,7 @@ function Preferences(props) {
     'preference__option--selected': !props.isTabIndent
   });
   return (
-    <div className={preferencesContainerClass} tabIndex="0" title="preference-menu" id="preferences-menu">
+    <div className={preferencesContainerClass} tabIndex="0" title="preference-menu">
       <div className="preferences__heading">
         <h2 className="preferences__title">Preferences</h2>
         <button className="preferences__exit-button" onClick={props.closePreferences}>
@@ -35,7 +35,15 @@ function Preferences(props) {
           <h6 className="preference__label">Decrease</h6>
         </button>
 
-        <input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.fontSize} onChange={props.updateFont}></input>
+        <input
+          className="preference__value"
+          aria-live="status"
+          aria-live="polite"
+          role="status"
+          value={props.fontSize}
+          onChange={props.updateFont}
+        >
+        </input>
         <button className="preference__minus-button" onClick={props.increaseFont}>
           <Isvg src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
@@ -48,7 +56,15 @@ function Preferences(props) {
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <input className="preference__value" aria-live="status" aria-live="polite" role="status" value={props.indentationAmount} onChange={props.updateIndentation}></input>
+        <input
+          className="preference__value"
+          aria-live="status"
+          aria-live="polite"
+          role="status"
+          value={props.indentationAmount}
+          onChange={props.updateIndentation}
+        >
+        </input>
         <button className="preference__minus-button" onClick={props.increaseIndentation}>
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 56a14393..d5715b85 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -83,6 +83,8 @@ class PreviewFrame extends React.Component {
     return (
       <iframe
         className="preview-frame"
+        role="region"
+        tabIndex="0"
         frameBorder="0"
         title="sketch output"
         sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index b0f61ac2..89cfec4e 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -41,7 +41,10 @@ function Toolbar(props) {
           {props.projectName}
         </span>
       </div>
-      <button className={preferencesButtonClass} onClick={props.openPreferences} role="menuitem" aria-haspopup="true" aria-owns="preferences-menu">
+      <button
+        className={preferencesButtonClass}
+        onClick={props.openPreferences}
+      >
         <Isvg src={preferencesUrl} alt="Show Preferences" />
       </button>
     </div>

From 589bc9f630f97b9ba28757ea7f5297385909b897 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Thu, 14 Jul 2016 17:20:44 -0400
Subject: [PATCH 5/9] change html tags

---
 client/components/Nav.js                     | 2 +-
 client/modules/IDE/components/Preferences.js | 4 ++--
 client/modules/IDE/components/Sidebar.js     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/components/Nav.js b/client/components/Nav.js
index 193a9b4d..e00fb8da 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router';
 
 function Nav(props) {
   return (
-    <nav className="nav" role="navigation">
+    <nav className="nav" role="navigation" title="main-navigation">
       <ul className="nav__items-left" title="project-menu">
         <li className="nav__item">
           <a
diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 119dd2e2..21169e72 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -20,7 +20,7 @@ function Preferences(props) {
     'preference__option--selected': !props.isTabIndent
   });
   return (
-    <div className={preferencesContainerClass} tabIndex="0" title="preference-menu">
+    <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
       <div className="preferences__heading">
         <h2 className="preferences__title">Preferences</h2>
         <button className="preferences__exit-button" onClick={props.closePreferences}>
@@ -74,7 +74,7 @@ function Preferences(props) {
           <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index 22184cc0..27e664ca 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 function Sidebar(props) {
   return (
-    <section className="sidebar">
+    <nav className="sidebar" role="navigation" title="file-navigation">
       <ul className="sidebar__file-list" title="file-list">
         {props.files.map(file => {
           let itemClass = classNames({
@@ -22,7 +22,7 @@ function Sidebar(props) {
           );
         })}
       </ul>
-    </section>
+    </nav>
   );
 }
 

From 4ddad410533c82f04d714db2c1e5888620a2c657 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 15 Jul 2016 16:47:12 -0400
Subject: [PATCH 6/9] add labels for buttons

---
 client/modules/IDE/components/Preferences.js | 43 +++++++++++++++++---
 client/modules/IDE/components/Toolbar.js     | 14 ++++++-
 client/styles/abstracts/_placeholders.scss   |  9 ++++
 client/styles/components/_preferences.scss   |  4 ++
 client/styles/components/_toolbar.scss       |  4 ++
 5 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 21169e72..a7ed6627 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -23,18 +23,28 @@ function Preferences(props) {
     <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
       <div className="preferences__heading">
         <h2 className="preferences__title">Preferences</h2>
-        <button className="preferences__exit-button" onClick={props.closePreferences}>
+        <button
+          className="preferences__exit-button"
+          onClick={props.closePreferences}
+          title="exit"
+        >
           <Isvg src={exitUrl} alt="Exit Preferences" />
         </button>
       </div>
 
       <div className="preference">
         <h4 className="preference__title">Text Size</h4>
-        <button className="preference__plus-button" onClick={props.decreaseFont}>
+        <button
+          className="preference__plus-button"
+          onClick={props.decreaseFont}
+          id="preference-decrease-font-size"
+        >
           <Isvg src={minusUrl} alt="Decrease Font Size" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-
+        <label htmlFor="preference-decrease-font-size" className="preference__button-label">
+          Decrease Font Size
+        </label>
         <input
           className="preference__value"
           aria-live="status"
@@ -44,18 +54,32 @@ function Preferences(props) {
           onChange={props.updateFont}
         >
         </input>
-        <button className="preference__minus-button" onClick={props.increaseFont}>
+        <button
+          className="preference__minus-button"
+          onClick={props.increaseFont}
+          id="preference-increase-font-size"
+        >
           <Isvg src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
         </button>
+        <label htmlFor="preference-increase-font-size" className="preference__button-label">
+          Increase Font Size
+        </label>
       </div>
 
       <div className="preference">
         <h4 className="preference__title">Indentation Amount</h4>
-        <button className="preference__plus-button" onClick={props.decreaseIndentation}>
+        <button
+          className="preference__plus-button"
+          onClick={props.decreaseIndentation}
+          id="preference-decrease-indentation"
+        >
           <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
+        <label htmlFor="preference-decrease-indentation" className="preference__button-label">
+          Decrease Indentation Amount
+        </label>
         <input
           className="preference__value"
           aria-live="status"
@@ -65,10 +89,17 @@ function Preferences(props) {
           onChange={props.updateIndentation}
         >
         </input>
-        <button className="preference__minus-button" onClick={props.increaseIndentation}>
+        <button
+          className="preference__minus-button"
+          onClick={props.increaseIndentation}
+          id="preference-increase-indentation"
+        >
           <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
         </button>
+        <label htmlFor="preference-increase-indentation" className="preference__button-label">
+          Increase Indentation Amount
+        </label>
         <div className="preference__vertical-list">
           <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
           <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index 89cfec4e..1c6e0a98 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -24,12 +24,18 @@ function Toolbar(props) {
   return (
     <div className="toolbar">
       <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
-      <button className={playButtonClass} onClick={props.startSketch}>
+      <button className={playButtonClass} onClick={props.startSketch} id="play-button">
         <Isvg src={playUrl} alt="Play Sketch" />
       </button>
-      <button className={stopButtonClass} onClick={props.stopSketch}>
+      <label htmlFor="play-button" className="toolbar__button-label">
+        play
+      </label>
+      <button className={stopButtonClass} onClick={props.stopSketch} id="stop-button">
         <Isvg src={stopUrl} alt="Stop Sketch" />
       </button>
+      <label htmlFor="stop-button" className="toolbar__button-label">
+        stop
+      </label>
       <div className="toolbar__project-name-container">
         <span
           className="toolbar__project-name"
@@ -44,9 +50,13 @@ function Toolbar(props) {
       <button
         className={preferencesButtonClass}
         onClick={props.openPreferences}
+        id="preferences-button"
       >
         <Isvg src={preferencesUrl} alt="Show Preferences" />
       </button>
+      <label htmlFor="preferences-button" className="toolbar__button-label">
+        preferences
+      </label>
     </div>
   );
 }
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 4b89cf7c..87858e12 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -106,3 +106,12 @@
     color: $light-primary-text-color;
   }
 }
+
+%fake-label {
+	position:absolute;
+	left:-10000px;
+	top:auto;
+	width:1px;
+	height:1px;
+	overflow:hidden;
+}
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 35371645..eaba7415 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -79,3 +79,7 @@
 		@extend %preference-option--selected;
 	}
 }
+
+.preference__button-label {
+	@extend %fake-label
+}
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 1bad6fd1..3f981dd3 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -54,3 +54,7 @@
 		color: $light-inactive-text-color;
 	}
 }
+
+.toolbar__button-label {
+	@extend %fake-label
+}

From 6187a26b101a9015c73ff52a0bacf3b224db77c5 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 15 Jul 2016 16:54:43 -0400
Subject: [PATCH 7/9] extend pref tab - old size doesn't eork in FF

---
 client/styles/components/_preferences.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index eaba7415..0ee38017 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -2,7 +2,7 @@
 	position: absolute;
 	top: #{66 / $base-font-size}rem;
 	right: #{40 / $base-font-size}rem;
-	width: #{332 / $base-font-size}rem;
+	width: #{336 / $base-font-size}rem;
 	background-color: $light-button-background-color;
 	display: none;
 	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;

From 079a6ebf29b989d38134c18c098fbf0610d93594 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 15 Jul 2016 17:00:40 -0400
Subject: [PATCH 8/9] change style name

---
 client/styles/abstracts/_placeholders.scss | 2 +-
 client/styles/components/_preferences.scss | 2 +-
 client/styles/components/_toolbar.scss     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 87858e12..6ef11137 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -107,7 +107,7 @@
   }
 }
 
-%fake-label {
+%hidden-label {
 	position:absolute;
 	left:-10000px;
 	top:auto;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 0ee38017..b4668279 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -81,5 +81,5 @@
 }
 
 .preference__button-label {
-	@extend %fake-label
+	@extend %hidden-label
 }
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 3f981dd3..bcd9680b 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -56,5 +56,5 @@
 }
 
 .toolbar__button-label {
-	@extend %fake-label
+	@extend %hidden-label
 }

From c29bbda4c20f22ab2efe04299dcb9ab67f0035b1 Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Fri, 15 Jul 2016 17:25:54 -0400
Subject: [PATCH 9/9] add back navigation role

---
 client/modules/IDE/components/Sidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index cb6c5c53..78119fc5 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -11,7 +11,7 @@ function Sidebar(props) {
   });
 
   return (
-    <nav className={sidebarClass} title="file-navigation">
+    <nav className={sidebarClass} title="file-navigation" role="navigation">
       <div className="sidebar__header">
         <h3 className="sidebar__title">Sketch Files</h3>
         <div className="sidebar__icons">