|
1 | 1 | import { useLayoutEffect, useState } from "react"; |
| 2 | +import { StyleSheet, View } from "react-native"; |
2 | 3 | import { GestureDetector, usePanGesture } from "react-native-gesture-handler"; |
3 | 4 | import Animated, { |
4 | 5 | cancelAnimation, |
@@ -102,19 +103,20 @@ function SwipeableUndoNotice(props: { |
102 | 103 | }} |
103 | 104 | > |
104 | 105 | <GestureDetector gesture={gesture}> |
105 | | - <Animated.View |
106 | | - collapsable={false} |
107 | | - entering={noticeEntering} |
108 | | - accessible |
109 | | - accessibilityRole="alert" |
110 | | - accessibilityLiveRegion="assertive" |
111 | | - accessibilityLabel={`${notice.action} thread`} |
112 | | - style={animatedStyle} |
113 | | - accessibilityActions={[{ name: "dismiss", label: "Dismiss message" }]} |
114 | | - onAccessibilityAction={({ nativeEvent }) => { |
115 | | - if (nativeEvent.actionName === "dismiss") dismiss(); |
116 | | - }} |
117 | | - > |
| 106 | + <Animated.View collapsable={false} entering={noticeEntering} style={animatedStyle}> |
| 107 | + {/* Keep the dismiss target separate so TalkBack can also focus Undo. */} |
| 108 | + <View |
| 109 | + accessible |
| 110 | + accessibilityRole="alert" |
| 111 | + accessibilityLiveRegion="assertive" |
| 112 | + accessibilityLabel={`${notice.action} thread`} |
| 113 | + accessibilityActions={[{ name: "dismiss", label: "Dismiss message" }]} |
| 114 | + onAccessibilityAction={({ nativeEvent }) => { |
| 115 | + if (nativeEvent.actionName === "dismiss") dismiss(); |
| 116 | + }} |
| 117 | + pointerEvents="none" |
| 118 | + style={StyleSheet.absoluteFill} |
| 119 | + /> |
118 | 120 | <Toast |
119 | 121 | message={`${notice.action} thread`} |
120 | 122 | action={{ label: "Undo", onPress: () => void notice.undo() }} |
|
0 commit comments