Skip to content

Instantly share code, notes, and snippets.

@marcogravbrot
Created February 6, 2025 01:02
Show Gist options
  • Save marcogravbrot/09a3f37411a3497dedb9cf0ced06a762 to your computer and use it in GitHub Desktop.
Save marcogravbrot/09a3f37411a3497dedb9cf0ced06a762 to your computer and use it in GitHub Desktop.
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
index c79181a..27fb021 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -167,6 +167,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
_providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
accessibilityRole:
_providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+ importantForAccessibility,
} = props;
//#endregion
@@ -1891,6 +1892,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
bottomInset={bottomInset}
detached={detached}
style={_providedContainerStyle}
+ importantForAccessibility={importantForAccessibility}
>
<Animated.View style={containerStyle}>
<BottomSheetBackgroundContainer
@@ -1906,6 +1908,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
accessible={_providedAccessible ?? undefined}
accessibilityRole={_providedAccessibilityRole ?? undefined}
accessibilityLabel={_providedAccessibilityLabel ?? undefined}
+ importantForAccessibility={importantForAccessibility}
>
<DraggableView
key="BottomSheetRootDraggableView"
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
index 3b9bf87..cd0de76 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -44,6 +44,7 @@ const BottomSheetBackdropComponent = ({
accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
accessibilityHint: _providedAccessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
+ importantForAccessibility,
}: BottomSheetDefaultBackdropProps) => {
//#region hooks
const { snapToIndex, close } = useBottomSheet();
@@ -150,6 +151,7 @@ const BottomSheetBackdropComponent = ({
typeof pressBehavior === 'string' ? pressBehavior : 'move'
} the Bottom Sheet`
}
+ importantForAccessibility={importantForAccessibility}
>
{children}
</Animated.View>
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx
index 3f165dd..a14e76b 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/BottomSheetBackground.tsx
@@ -6,12 +6,13 @@ import type { BottomSheetBackgroundProps } from './types';
const BottomSheetBackgroundComponent = ({
pointerEvents,
style,
+ accessible = false,
+ importantForAccessibility = "no"
}: BottomSheetBackgroundProps) => (
<View
pointerEvents={pointerEvents}
- accessible={true}
- accessibilityRole="adjustable"
- accessibilityLabel="Bottom Sheet"
+ accessible={accessible}
+ importantForAccessibility={importantForAccessibility}
style={[styles.container, style]}
/>
);
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/types.d.ts b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/types.d.ts
index 37d2e20..2748860 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/types.d.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackground/types.d.ts
@@ -3,4 +3,7 @@ import type { BottomSheetVariables } from '../../types';
export interface BottomSheetBackgroundProps
extends Pick<ViewProps, 'pointerEvents' | 'style'>,
- BottomSheetVariables {}
+ BottomSheetVariables {
+ accessible?: boolean;
+ importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
+ }
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index 0716ecd..2af849b 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -20,6 +20,7 @@ function BottomSheetContainerComponent({
detached,
style,
children,
+ importantForAccessibility,
}: BottomSheetContainerProps) {
const containerRef = useRef<View>(null);
//#region styles
@@ -84,6 +85,7 @@ function BottomSheetContainerComponent({
pointerEvents="box-none"
onLayout={shouldCalculateHeight ? handleContainerLayout : undefined}
style={containerStyle}
+ importantForAccessibility={importantForAccessibility}
>
{children}
</View>
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/types.d.ts b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/types.d.ts
index f3bbdf2..25f3e70 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/types.d.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetContainer/types.d.ts
@@ -12,4 +12,5 @@ export interface BottomSheetContainerProps
shouldCalculateHeight?: boolean;
style?: StyleProp<ViewStyle>;
children?: ReactNode;
+ importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
}
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
index 53ce110..ca95268 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -53,6 +53,9 @@ function BottomSheetModalComponent<T = any>(
animateOnMount = true,
containerComponent: ContainerComponent = React.Fragment,
+ // accessibility
+ importantForAccessibility,
+
// callbacks
onChange: _providedOnChange,
@@ -456,6 +459,7 @@ function BottomSheetModalComponent<T = any>(
onClose={handleBottomSheetOnClose}
onAnimate={handleBottomSheetOnAnimate}
$modal={true}
+ importantForAccessibility={importantForAccessibility}
>
{typeof Content === 'function' ? <Content data={data} /> : Content}
</BottomSheet>
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
index 2327d8a..7d615d6 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx
@@ -1,5 +1,5 @@
import { PortalProvider } from '@gorhom/portal';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useSharedValue } from 'react-native-reanimated';
import { MODAL_STACK_BEHAVIOR } from '../../constants';
import {
@@ -19,6 +19,7 @@ import type {
BottomSheetModalProviderProps,
BottomSheetModalRef,
} from './types';
+import { View } from 'react-native';
const BottomSheetModalProviderWrapper = ({
children,
@@ -30,6 +31,7 @@ const BottomSheetModalProviderWrapper = ({
//#region variables
const sheetsQueueRef = useRef<BottomSheetModalRef[]>([]);
+ const [sheetsCount, setSheetsCount] = useState(0);
//#endregion
//#region private methods
@@ -87,6 +89,7 @@ const BottomSheetModalProviderWrapper = ({
willUnmount: false,
});
sheetsQueueRef.current = _sheetsQueue;
+ setSheetsCount(_sheetsQueue.length);
},
[]
);
@@ -101,6 +104,7 @@ const BottomSheetModalProviderWrapper = ({
*/
_sheetsQueue.splice(sheetIndex, 1);
sheetsQueueRef.current = _sheetsQueue;
+ setSheetsCount(_sheetsQueue.length);
/**
* Here we try to restore previous sheet position if unmounted
@@ -144,6 +148,7 @@ const BottomSheetModalProviderWrapper = ({
}
sheetsQueueRef.current = _sheetsQueue;
+ setSheetsCount(_sheetsQueue.length);
}, []);
//#endregion
@@ -191,15 +196,22 @@ const BottomSheetModalProviderWrapper = ({
);
//#endregion
+ const isModalVisible = sheetsQueueRef.current.length > 0;
+
//#region renders
return (
<BottomSheetModalProvider value={externalContextVariables}>
<BottomSheetModalInternalProvider value={internalContextVariables}>
<BottomSheetContainer
+ importantForAccessibility={isModalVisible ? "yes" : "no-hide-descendants"}
containerOffset={animatedContainerOffset}
containerHeight={animatedContainerHeight}
/>
- <PortalProvider>{children}</PortalProvider>
+ <PortalProvider>
+ <View style={{flex: 1}} importantForAccessibility={isModalVisible ? "no-hide-descendants" : "yes"}>
+ {children}
+ </View>
+ </PortalProvider>
</BottomSheetModalInternalProvider>
</BottomSheetModalProvider>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment