Skip to content

Commit f6aec4c

Browse files
authored
Set default accessible prop on Pressable (#3463)
## Description Currently to make `Pressable` accessible one has to pass `accessible` prop. As pointed out in [this comment](#3428 (comment)), `Pressable` from `react-native` is accessible by default. In order to ensure that our component is _**drop-in replacement**_, I've added default value to `true`, following [this logic](https://github.com/facebook/react-native/blob/041014b8de528644c4a2c50bd4cea6f764478009/packages/react-native/Libraries/Components/Pressable/Pressable.js#L236). ## Test plan <details> <summary>Tested on the following example:</summary> ```jsx import React from 'react'; import { StyleSheet, Text, View, Pressable as RNPressable } from 'react-native'; import { GestureHandlerRootView, RectButton, Pressable, } from 'react-native-gesture-handler'; // Not accessible: const NotAccessibleButton = () => ( <RectButton style={styles.button} onPress={() => console.log('Not accessible')}> <Text>Foo</Text> </RectButton> ); // Accessible: const AccessibleButton = () => ( <RectButton style={styles.button} onPress={() => console.log('Accessible')}> <View accessible accessibilityRole="button"> <Text>Bar</Text> </View> </RectButton> ); export default function EmptyExample() { return ( <GestureHandlerRootView style={styles.container}> <NotAccessibleButton /> <AccessibleButton /> <Pressable style={styles.button} accessible testID="RNGH" accessibilityLabel="RNGH" onPress={() => console.log('RNGH')}> <Text>Pressable</Text> </Pressable> <RNPressable style={styles.button} accessible accessibilityLabel="RN" onPress={() => console.log('RN')}> <Text>RNPressable</Text> </RNPressable> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', gap: 20, }, button: { width: 100, height: 25, backgroundColor: 'crimson', alignItems: 'center', justifyContent: 'space-around', }, }); ``` </details>
1 parent 911481e commit f6aec4c

File tree

1 file changed

+2
-0
lines changed

1 file changed

+2
-0
lines changed

src/components/Pressable/Pressable.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const Pressable = forwardRef(
5656
android_disableSound,
5757
android_ripple,
5858
disabled,
59+
accessible,
5960
...remainingProps
6061
} = props;
6162

@@ -442,6 +443,7 @@ const Pressable = forwardRef(
442443
<NativeButton
443444
{...remainingProps}
444445
ref={pressableRef ?? innerPressableRef}
446+
accessible={accessible !== false}
445447
hitSlop={appliedHitSlop}
446448
enabled={isPressableEnabled}
447449
touchSoundDisabled={android_disableSound ?? undefined}

0 commit comments

Comments
 (0)