add aria-tags and titles

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>}

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>;
   }
 }
 

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>

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,

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>

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",

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