From 69eeabd99eee805f7aeb2800237dbddc5e190acd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 9 Dec 2019 14:12:30 +0000
Subject: [PATCH] Fix accessibility to the reaction picker (not of it though)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/ContextMenu.js          |  8 ++++++++
 src/components/views/messages/MessageActionBar.js | 11 ++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/ContextMenu.js b/src/components/structures/ContextMenu.js
index 455deb4708..bda19432a8 100644
--- a/src/components/structures/ContextMenu.js
+++ b/src/components/structures/ContextMenu.js
@@ -70,10 +70,13 @@ export class ContextMenu extends React.Component {
 
         // on resize callback
         windowResize: PropTypes.func,
+
+        catchTab: PropTypes.bool, // whether to close the ContextMenu on TAB (default=true)
     };
 
     static defaultProps = {
         hasBackground: true,
+        catchTab: true,
     };
 
     constructor() {
@@ -187,6 +190,11 @@ export class ContextMenu extends React.Component {
 
         switch (ev.key) {
             case Key.TAB:
+                if (!this.props.catchTab) {
+                    handled = false;
+                    break;
+                }
+                // fallthrough
             case Key.ESCAPE:
                 this.props.onFinished();
                 break;
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 5a12717762..81e806cf62 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -78,14 +78,17 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
     </React.Fragment>;
 };
 
-const ReactButton = ({mxEvent, reactions}) => {
+const ReactButton = ({mxEvent, reactions, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
+    useEffect(() => {
+        onFocusChange(menuDisplayed);
+    }, [onFocusChange, menuDisplayed]);
 
     let contextMenu;
     if (menuDisplayed) {
         const buttonRect = button.current.getBoundingClientRect();
         const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
+        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} catchTab={false}>
             <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
         </ContextMenu>;
     }
@@ -162,7 +165,9 @@ export default class MessageActionBar extends React.PureComponent {
 
         if (isContentActionable(this.props.mxEvent)) {
             if (this.context.room.canReact) {
-                reactButton = <ReactButton mxEvent={this.props.mxEvent} reactions={this.props.reactions} />;
+                reactButton = (
+                    <ReactButton mxEvent={this.props.mxEvent} reactions={this.props.reactions} onFocusChange={this.onFocusChange} />
+                );
             }
             if (this.context.room.canReply) {
                 replyButton = <AccessibleButton