From 85ade7e1a1060f3ae8afd41f4080a4ea81e88131 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 16 Dec 2019 12:16:41 +0000
Subject: [PATCH] Switch to react-focus-lock for it to comprehend Portals

---
 package.json                               |  2 +-
 src/components/views/dialogs/BaseDialog.js | 29 +++++++++++++---------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 2f35ab7750..8688fe42e6 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
-    "focus-trap-react": "^3.0.5",
+    "react-focus-lock": "^2.2.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index d83ce46360..f7aae7c6da 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2018, 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import createReactClass from 'create-react-class';
-import FocusTrap from 'focus-trap-react';
+import FocusLock from 'react-focus-lock';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -121,20 +122,24 @@ export default createReactClass({
         }
 
         return (
-            <FocusTrap onKeyDown={this._onKeyDown}
+            <FocusLock
+                returnFocus={true}
+                lockProps={{
+                    onKeyDown: this._onKeyDown,
+                    role: "dialog",
+                    ["aria-labelledby"]: "mx_BaseDialog_title",
+                    // This should point to a node describing the dialog.
+                    // If we were about to completely follow this recommendation we'd need to
+                    // make all the components relying on BaseDialog to be aware of it.
+                    // So instead we will use the whole content as the description.
+                    // Description comes first and if the content contains more text,
+                    // AT users can skip its presentation.
+                    ["aria-describedby"]: this.props.contentId,
+                }}
                 className={classNames({
                     [this.props.className]: true,
                     'mx_Dialog_fixedWidth': this.props.fixedWidth,
                 })}
-                role="dialog"
-                aria-labelledby='mx_BaseDialog_title'
-                // This should point to a node describing the dialog.
-                // If we were about to completely follow this recommendation we'd need to
-                // make all the components relying on BaseDialog to be aware of it.
-                // So instead we will use the whole content as the description.
-                // Description comes first and if the content contains more text,
-                // AT users can skip its presentation.
-                aria-describedby={this.props.contentId}
             >
                 <div className={classNames('mx_Dialog_header', {
                     'mx_Dialog_headerWithButton': !!this.props.headerButton,
@@ -146,7 +151,7 @@ export default createReactClass({
                     { cancelButton }
                 </div>
                 { this.props.children }
-            </FocusTrap>
+            </FocusLock>
         );
     },
 });