Pare back, add guards, fix focus trap

src/view/com/composer/text-input/web/EmojiPicker.web.tsx

@@ -1,16 +1,13 @@
 import React from 'react'
-import {
-  GestureResponderEvent,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import {Pressable, useWindowDimensions, View} from 'react-native'
 import Picker from '@emoji-mart/react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 import {FocusScope} from '@radix-ui/react-focus-scope'
 
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
-import {atoms as a} from '#/alf'
+import {atoms as a, flatten} from '#/alf'
 import {Portal} from '#/components/Portal'
 
 const HEIGHT_OFFSET = 40
@@ -52,6 +49,7 @@ interface IProps {
 }
 
 export function EmojiPicker({state, close, pinToTop}: IProps) {
+  const {_} = useLingui()
   const {height, width} = useWindowDimensions()
 
   const isShiftDown = React.useRef(false)
@@ -120,49 +118,52 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
 
   if (!state.isOpen) return null
 
-  const onPressBackdrop = (e: GestureResponderEvent) => {
-    // @ts-ignore web only
-    if (e.nativeEvent?.pointerId === -1) return
-    close()
-  }
-
   return (
     <Portal>
-      <FocusScope loop asChild trapped>
-        <TouchableWithoutFeedback
-          accessibilityRole="button"
-          onPress={onPressBackdrop}
-          accessibilityViewIsModal>
-          <View
-            style={[
-              a.fixed,
-              a.w_full,
-              a.h_full,
-              a.align_center,
-              {
-                top: 0,
-                left: 0,
-                right: 0,
-              },
-            ]}>
-            {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
-            <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-              <View style={[{position: 'absolute'}, position]}>
-                <DismissableLayer
-                  onFocusOutside={evt => evt.preventDefault()}
-                  onDismiss={close}>
-                  <Picker
-                    data={async () => {
-                      return (await import('./EmojiPickerData.json')).default
-                    }}
-                    onEmojiSelect={onInsert}
-                    autoFocus={true}
-                  />
-                </DismissableLayer>
-              </View>
-            </TouchableWithoutFeedback>
+      <FocusScope loop trapped>
+        <Pressable
+          accessible
+          accessibilityLabel={_(msg`Close emoji picker`)}
+          accessibilityHint={_(msg`Tap to close the emoji picker`)}
+          onPress={close}
+          style={[a.fixed, a.inset_0]}
+        />
+
+        <View
+          style={flatten([
+            a.fixed,
+            a.w_full,
+            a.h_full,
+            a.align_center,
+            a.z_10,
+            {
+              top: 0,
+              left: 0,
+              right: 0,
+            },
+          ])}>
+          <View style={[{position: 'absolute'}, position]}>
+            <DismissableLayer
+              onFocusOutside={evt => evt.preventDefault()}
+              onDismiss={close}>
+              <Picker
+                data={async () => {
+                  return (await import('./EmojiPickerData.json')).default
+                }}
+                onEmojiSelect={onInsert}
+                autoFocus={true}
+              />
+            </DismissableLayer>
           </View>
-        </TouchableWithoutFeedback>
+        </View>
+
+        <Pressable
+          accessible
+          accessibilityLabel={_(msg`Close emoji picker`)}
+          accessibilityHint={_(msg`Tap to close the emoji picker`)}
+          onPress={close}
+          style={[a.fixed, a.inset_0]}
+        />
       </FocusScope>
     </Portal>
   )