react-native-accessibility-engine
react-native-accessibility-engine copied to clipboard
`Pressable-label-required` rule not identifying text
Describe the bug
When I run the test suite with expect(container).toBeAccessible(); , I am getting the following error:
"This pressable has no text content, so an accessibility label can't be automatically inferred" where it advises to either add an accessibility label or text.
The card I'm testing is a nested view which does contain text which, when testing with a screen reader, is accessed by the screen reader and read out. The text is being added dynamically from an external source.
I've tried adding 'accessible = true' to group together the views on each nested view so that the test can identify the text but this does not solve it.
Component under test
<Card gradientStyle={gradientStyle} onPress={onPress} noPadding testID={testID} accessible>
<View style={styles.innerContainer} accessible>
<View style={[styles.textContainer, textContainerStyles]} accessible>
{applyTitleGradient ? (
<GradientText
text={title}
textType="body1"
gradientStyle={gradientStyle}
testID="utility-tile-gradient-text"
/>
) : (
<Text type="body1" style={[styles.text, !!titleColour && { color: colors[titleColour] }]} accessible>
{title}
</Text>
)}
<View style={subtitleContainerStyles} accessible>
{!!subtitle && (
<Text type="body2" style={styles.subtitleText} accessible>
{subtitle}
</Text>
)}
</View>
</View>
<View style={[styles.iconContainer, iconContainerStyles]}>{fontScale < 1.5 && utilityTileMedia()}</View>
</View>
</Card>
);
Expected behavior I expect the test to pass
Context
- React Native version: 0.67.3
- Test runner: Jest
- Accessibility Engine version: 2.0.0
Hello, @vmarsterson! Sorry about the wait, I haven't had time to focus on the engine these last few weeks.
When you say that the text is added dynamically from an external source, do you mean that it's being passed in via props or returned from a function like fetch? 🤔 If so, are you mocking these values in your test?