Ivan - Table Component - Add tabbable property to menu [skip ci]

client/gulp/tasks/browserSync.js

@@ -8,7 +8,7 @@ gulp.task('browserSync', function() {
 
   browserSync({
     proxy: 'localhost:' + config.serverport,
-    startPath: 'app'
+    startPath: '/'
   });
 
 });

client/gulp/tasks/browserify.js

@@ -21,7 +21,7 @@ var util = require('gulp-util');
 function buildScript(file, watch) {
 
   var bundler = browserify({
-    entries: [config.sourceDir + '/' + file],
+    entries: [config.sourceDir + file],
     debug: !global.isProd,
     insertGlobalVars: {
       noFixtures: function() {

client/package.json

@@ -56,6 +56,7 @@
     "app-module-path": "^1.0.3",
     "classnames": "^2.1.3",
     "jquery": "^2.1.4",
+    "keycode": "^2.1.4",
     "localStorage": "^1.0.3",
     "lodash": "^3.10.0",
     "messageformat": "^0.2.2",

client/src/app/main/dashboard/dashboard-menu.js

@@ -31,6 +31,7 @@ class DashboardMenu extends React.Component {
             items: this.getMenuItems(),
             selectedIndex: this.getSelectedIndex(),
             onItemClick: this.goToPathByIndex.bind(this),
+            tabbable: true,
             type: 'secondary'
         };
     }

client/src/app/main/main-recover-password/main-recover-password-page.js

@@ -74,7 +74,7 @@ class MainRecoverPasswordPage extends React.Component {
     }
 
     onPasswordRecovered() {
-        setTimeout(() => {this.props.history.push('/app')}, 2000);
+        setTimeout(() => {this.props.history.push('/')}, 2000);
         this.setState({
             recoverStatus: 'valid',
             loading: false

client/src/core-components/checkbox.js

@@ -1,6 +1,7 @@
 import React              from 'react';
 import classNames         from 'classnames';
 import _                  from 'lodash';
+import keyCode from 'keycode';
 
 import callback           from 'lib-core/callback';
 import getIcon            from 'lib-core/get-icon';
@@ -87,7 +88,7 @@ class CheckBox extends React.Component {
     }
 
     handleIconKeyDown(event) {
-        if (event.keyCode == 32) {
+        if (event.keyCode === keyCode('SPACE')) {
             event.preventDefault();
 
             callback(this.handleChange.bind(this), this.props.onChange)({

client/src/core-components/menu.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import classNames from 'classnames';
+import keyCode from 'keycode';
 
 import Icon from 'core-components/icon';
 
@@ -13,12 +14,14 @@ class Menu extends React.Component {
             content: React.PropTypes.string.isRequired,
             icon: React.PropTypes.string
         })).isRequired,
-        selectedIndex: React.PropTypes.number
+        selectedIndex: React.PropTypes.number,
+        tabbable: React.PropTypes.boolean
     };
 
     static defaultProps = {
         type: 'primary',
-        selectedIndex: 0
+        selectedIndex: 0,
+        tabbable: false
     };
 
     render() {
@@ -65,6 +68,7 @@ class Menu extends React.Component {
         delete props.items;
         delete props.onItemClick;
         delete props.selectedIndex;
+        delete props.tabbable;
         delete props.type;
 
         return props;
@@ -84,7 +88,9 @@ class Menu extends React.Component {
     getItemProps(index) {
         return {
             className: this.getItemClass(index),
-            onClick: this.handleItemClick.bind(this, index),
+            onClick: this.onItemClick.bind(this, index),
+            tabIndex: (this.props.tabbable) ? '0' : null,
+            onKeyDown: this.onKeyDown.bind(this, index),
             key: index
         };
     }
@@ -98,7 +104,16 @@ class Menu extends React.Component {
         return classNames(classes);
     }
 
-    handleItemClick(index) {
+    onKeyDown(index, event) {
+        let enterKey = keyCode('ENTER');
+        let spaceKey = keyCode('SPACE');
+
+        if(event.keyCode === enterKey || event.keyCode === spaceKey) {
+            this.onItemClick(index);
+        }
+    }
+
+    onItemClick(index) {
         if (this.props.onItemClick) {
             this.props.onItemClick(index);
         }

client/src/index.js

@@ -4,8 +4,8 @@ import { Provider } from 'react-redux';
 
 import SessionActions from 'actions/session-actions';
 import ConfigActions from 'actions/config-actions';
-import routes from './Routes';
-import store from './store';
+import routes from 'app/Routes';
+import store from 'app/store';
 
 if ( process.env.NODE_ENV !== 'production' ) {
     // Enable React devtools