From 1052ed600809df90b2faeca2a955733dc030c803 Mon Sep 17 00:00:00 2001
From: Bruno Castro <bruno.castro@codeminer42.com>
Date: Thu, 16 Jul 2020 04:24:41 -0300
Subject: [PATCH] fix: improve accessibility around Menu dismissing (#2028)

---
 src/components/Menu/Menu.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index be2a046b01..2d8edb784c 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -44,6 +44,10 @@ type Props = {
    * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
    */
   onDismiss: () => void;
+  /**
+   * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.
+   */
+  overlayAccessibilityLabel?: string;
   /**
    * Content of the `Menu`.
    */
@@ -130,6 +134,7 @@ class Menu extends React.Component<Props, State> {
 
   static defaultProps = {
     statusBarHeight: APPROX_STATUSBAR_HEIGHT,
+    overlayAccessibilityLabel: 'Close menu',
   };
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State) {
@@ -339,6 +344,7 @@ class Menu extends React.Component<Props, State> {
       theme,
       statusBarHeight,
       onDismiss,
+      overlayAccessibilityLabel,
     } = this.props;
 
     const {
@@ -530,7 +536,11 @@ class Menu extends React.Component<Props, State> {
         {this.isAnchorCoord() ? null : anchor}
         {rendered ? (
           <Portal>
-            <TouchableWithoutFeedback onPress={onDismiss}>
+            <TouchableWithoutFeedback
+              accessibilityLabel={overlayAccessibilityLabel}
+              accessibilityRole="button"
+              onPress={onDismiss}
+            >
               <View style={StyleSheet.absoluteFill} />
             </TouchableWithoutFeedback>
             <View
@@ -541,6 +551,8 @@ class Menu extends React.Component<Props, State> {
               accessibilityViewIsModal={visible}
               style={[styles.wrapper, positionStyle, style]}
               pointerEvents={visible ? 'box-none' : 'none'}
+              // @ts-ignore - FIX ME
+              onAccessibilityEscape={onDismiss}
             >
               <Animated.View style={{ transform: positionTransforms }}>
                 <Surface