From 9f3f88ba00faf25a754f6939818e1cb8e42cadde Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 17 Sep 2019 15:41:39 -0600
Subject: [PATCH] Focus context menus so screen readers can find them

Fixes https://github.com/vector-im/riot-web/issues/10899

The `tabIndex` is required to make the thing actually focusable. This is the same trick employed in https://github.com/matrix-org/matrix-react-sdk/pull/2994
---
 src/components/structures/ContextualMenu.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js
index 3ce52247d9..27a202785b 100644
--- a/src/components/structures/ContextualMenu.js
+++ b/src/components/structures/ContextualMenu.js
@@ -20,6 +20,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {focusCapturedRef} from "../../utils/Accessibility";
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -83,6 +84,9 @@ export default class ContextualMenu extends React.Component {
         // We don't need to clean up when unmounting, so ignore
         if (!element) return;
 
+        // For screen readers to find the thing
+        focusCapturedRef(element);
+
         this.setState({
             contextMenuRect: element.getBoundingClientRect(),
         });
@@ -206,7 +210,7 @@ export default class ContextualMenu extends React.Component {
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
         return <div className={className} style={{...position, ...wrapperStyle}}>
-            <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
+            <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect} tabIndex={0}>
                 { chevron }
                 <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
             </div>