Masking support without accessibilitylabel

[marandaneto]

Description

https://posthog.com/questions/react-native-accessibility-label-ph-no-capture

[ge-mattcassell]

Try this wrapping component to hide content without impacting accessibility.

The crucial part of this wrapper is the Android importantForAccessibility="no". I have tested on iOS and Android (React Native 0.79.3), and seems that the content of this wrapper is hidden, but screen reader behaviour is as expected. Note that React Native updates seem to sometimes change accessibility behaviour, so it's possible this may no longer work with a future update.

import { PropsWithChildren } from 'react';
import { View } from 'react-native';

/**
 * This is wrapper to hide its children form PostHog touch capture,
 * and from session recordings without compromising accessibility.
 */
const NoCaptureWrapper = ({ children }: PropsWithChildren) => (
	<View
		ph-no-capture // Hide from touch capture
		accessibilityLabel="ph-no-capture" // Hide from session recordings
		importantForAccessibility="no" // Prevent View hiding accessible content in Android
	>
		{children}
	</View>
);

export default NoCaptureWrapper;

[marandaneto]

@ge-mattcassell interesting approach, we used something similar for Flutter

I think it makes sense to have this builtin in the SDK, would you like to add it to this SDK? https://github.com/PostHog/posthog-js-lite/tree/main/posthog-react-native/

The ph-no-capture bits have to be configurable with a default param since you can customize this value by setting the noCaptureProp https://posthog.com/docs/libraries/react-native

<PostHogProvider apiKey="sTMFPsFhdP1Ssg" autocapture={{
    noCaptureProp: "ph-no-capture", // can be something else
    ...
</PostHogProvider>