Several changes improving accessibility of the dialogs

- Wrapped all the modals inside a react-focus-trap component disabling
keyboard navigation outside the modal dialogs
- Disabled our custom key handling at dialog level. Cancelling on esc
key is now handled via FocusTrap component.
- Removed onEnter prop from the BaseDialog component. Dialogs that
submit data all now embed a form with onSubmit handler. And since
keyboard focus is now managed better via FocusTrap it no longer makes
sense for the other dialog types. Fixes
https://github.com/vector-im/riot-web/issues/5736
- Set aria-hidden on the matrixChat outer node when showing dialogs to
disable navigating outside the modals by using screen reader specific
features.

src/components/views/dialogs/BaseDialog.js

@@ -33,9 +33,6 @@ export default React.createClass({
         // onFinished callback to call when Escape is pressed
         onFinished: React.PropTypes.func.isRequired,
 
-        // callback to call when Enter is pressed
-        onEnterPressed: React.PropTypes.func,
-
         // CSS class to apply to dialog div
         className: React.PropTypes.string,
 
@@ -51,17 +48,16 @@ export default React.createClass({
         contentId: React.PropTypes.string
     },
 
-    _onKeyDown: function(e) {
-        if (e.keyCode === KeyCode.ESCAPE) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished();
-        } else if (e.keyCode === KeyCode.ENTER) {
-            if (this.props.onEnterPressed) {
-                e.stopPropagation();
-                e.preventDefault();
-                this.props.onEnterPressed(e);
-            }
+    componentDidMount: function() {
+        this.applicationNode = document.getElementById('matrixchat');
+        if (this.applicationNode) {
+            this.applicationNode.setAttribute('aria-hidden', 'true');
+        }
+    },
+
+    componentWillUnmount: function() {
+        if (this.applicationNode) {
+            this.applicationNode.setAttribute('aria-hidden', 'false');
         }
     },
 
@@ -73,7 +69,7 @@ export default React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         return (
-            <div onKeyDown={this._onKeyDown} className={this.props.className} role="dialog" aria-labelledby='mx_BaseDialog_title' aria-describedby={this.props.contentId}>
+            <div className={this.props.className} role="dialog" aria-labelledby='mx_BaseDialog_title' aria-describedby={this.props.contentId}>
                 <AccessibleButton onClick={this._onCancelClick}
                     className="mx_Dialog_cancelButton"
                 >