diff --git a/js/src/ui/Container/container.js b/js/src/ui/Container/container.js
index 51a6a5daa..5d4127959 100644
--- a/js/src/ui/Container/container.js
+++ b/js/src/ui/Container/container.js
@@ -30,15 +30,22 @@ export default class Container extends Component {
compact: PropTypes.bool,
light: PropTypes.bool,
style: PropTypes.object,
+ tabIndex: PropTypes.number,
title: nodeOrStringProptype()
}
render () {
- const { children, className, compact, light, style } = this.props;
+ const { children, className, compact, light, style, tabIndex } = this.props;
const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
+ const props = {};
+
+ if (Number.isInteger(tabIndex)) {
+ props.tabIndex = tabIndex;
+ }
+
return (
-
+
{ this.renderTitle() }
{ children }
diff --git a/js/src/ui/Modal/modal.js b/js/src/ui/Modal/modal.js
index 0b56692a8..d9d6ddbaf 100644
--- a/js/src/ui/Modal/modal.js
+++ b/js/src/ui/Modal/modal.js
@@ -18,6 +18,7 @@ import { Dialog } from 'material-ui';
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
+import ReactDOM from 'react-dom';
import { nodeOrStringProptype } from '~/util/proptypes';
@@ -49,6 +50,14 @@ class Modal extends Component {
waiting: PropTypes.array
}
+ componentDidMount () {
+ const element = ReactDOM.findDOMNode(this.refs.dialog);
+
+ if (element) {
+ element.focus();
+ }
+ }
+
render () {
const { muiTheme } = this.context;
const { actions, busy, children, className, current, compact, settings, steps, title, visible, waiting } = this.props;
@@ -85,9 +94,12 @@ class Modal extends Component {
+ }
+ tabIndex={ 0 }
+ >
{ children }