fix: enable detachInactiveScreens by default on web for better a11y

packages/stack/src/views/Screens.tsx

@@ -11,6 +11,29 @@ try {
 
 export const shouldUseActivityState = Screens?.shouldUseActivityState;
 
+// So we use our custom implementation to handle a11y better
+class WebScreen extends React.Component<
+  ViewProps & {
+    active: number;
+    children: React.ReactNode;
+  }
+> {
+  render() {
+    const { active, style, ...rest } = this.props;
+
+    return (
+      <View
+        // @ts-expect-error: hidden exists on web, but not in React Native
+        hidden={!active}
+        style={[style, { display: active ? 'flex' : 'none' }]}
+        {...rest}
+      />
+    );
+  }
+}
+
+const AnimatedWebScreen = Animated.createAnimatedComponent(WebScreen);
+
 export const MaybeScreenContainer = ({
   enabled,
   ...rest
@@ -37,6 +60,11 @@ export const MaybeScreen = ({
   active: 0 | 1 | Animated.AnimatedInterpolation;
   children: React.ReactNode;
 }) => {
+  if (enabled && Platform.OS === 'web') {
+    // @ts-expect-error: the animated component has incorrect type for style prop
+    return <AnimatedWebScreen active={active} {...rest} />;
+  }
+
   if (enabled && Screens?.screensEnabled()) {
     if (shouldUseActivityState) {
       return (

packages/stack/src/views/Stack/CardStack.tsx

@@ -396,7 +396,9 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureCancel,
       // Enable on new versions of `react-native-screens`
       // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction.
-      detachInactiveScreens = shouldUseActivityState ?? false,
+      detachInactiveScreens = Platform.OS === 'web'
+        ? true
+        : shouldUseActivityState ?? false,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;