diff --git a/.changeset/backdrops-voiceover.md b/.changeset/backdrops-voiceover.md new file mode 100644 index 00000000..7e1d4513 --- /dev/null +++ b/.changeset/backdrops-voiceover.md @@ -0,0 +1,5 @@ +--- +"@gryt/ui-native": patch +--- + +Dialog and Drawer no longer hide their contents from VoiceOver. A VoiceOver user can also close them with the escape gesture now. diff --git a/packages/ui-native/src/components/Dialog/Dialog.tsx b/packages/ui-native/src/components/Dialog/Dialog.tsx index ee9030a9..78ee5a4a 100644 --- a/packages/ui-native/src/components/Dialog/Dialog.tsx +++ b/packages/ui-native/src/components/Dialog/Dialog.tsx @@ -88,6 +88,7 @@ function Popup({ // iOS hides everything behind a modal from VoiceOver with this; Android // gets the same effect from Modal itself. accessibilityViewIsModal + onAccessibilityEscape={dismissible ? () => setOpen(false) : undefined} style={[ { width: "100%", @@ -129,7 +130,9 @@ function Popup({ // AlertDialog turns it off for the same reason it turns off the scrim. onRequestClose={dismissible ? () => setOpen(false) : undefined} > + {/* Not `accessible`: a Pressable is by default, and that hides everything inside it from VoiceOver. */} setOpen(false) : undefined} diff --git a/packages/ui-native/src/components/Drawer/Drawer.tsx b/packages/ui-native/src/components/Drawer/Drawer.tsx index c6610b46..d698cd29 100644 --- a/packages/ui-native/src/components/Drawer/Drawer.tsx +++ b/packages/ui-native/src/components/Drawer/Drawer.tsx @@ -329,7 +329,9 @@ function Popup({ animationType="none" onRequestClose={dismissible ? () => setOpen(false) : undefined} > + {/* Not `accessible`: a Pressable is by default, and that hides everything inside it from VoiceOver. */} setOpen(false) : undefined} style={{ flex: 1 }} > @@ -340,6 +342,7 @@ function Popup({ setOpen(false) : undefined} style={[ { position: "absolute", @@ -368,6 +371,7 @@ function Popup({ ]} > {}} style={[ {