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] 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';