Problem Solved!
After putting in the right search words I found THE hint.
Some additional prototyping and testing lead to the expected results then.
React Native Context
With React Native comes an Accessibility concept.
Every view element can be tagged with an accesible attribute.
In short that means, if at any level in the GUI hierarchy an element’s accessible attribute is set to true all its child elements are not accessible individually.
In the following example the views accessible attribute is set to true which implies, that the text of the embedded text elements is not accessible sepeartely. I. e. the texts cannot be selected for cut copy paste operations.
Accessibility Eample
text one
text two
</View
In terms of testing it is essential to make any elements, that are to be eaxamined or tested invariant to code changes.
I. e. that requires to orchestrate them with resusable ids like
Accessibility Eample
<Text accessibilityLabel={“testId-1”} ={“testId-1”}}>text one
<Text accessibilityLabel={“testId-2”} ={“testId-2”}}>text two
</View
This should enable searching for the text fields maybe like …findbbyId(“testId-1”)
With the accessible attribute is set to true at the view level this will not work since that exactly disables physical and thereby programmtic access to these element.
The solution here is, to set every elements accessible attribute, in the hierarchy of the element that you want to access, to false.
Thus the example view has to be orchestrated like this:
Accessibility Eample
<Text accessible={true} accessibilityLabel={“testId-1”} ={“testId-1”}}>text one
<Text accessible={true} accessibilityLabel={“testId-2”} ={“testId-2”}}>text two
</View
Coding Requirements
Default: accessible={false}
With the previuos explanation in mind, we request that every view element is tagged with accessible={false} by default and only the “operational” elements will be accessible.
Common function testId
In order to ease the orchestration process a general pupose testId method has to be provided.
Fehler beim Rendern des Makros ‘code’: Ungültiger Wert für den Parameter ‘firstline’
export default function testId(id) {
return { accessible: true, accessibilityLabel: id, testID: id };
}
Then the view example can be rewritten like this:
Accessibility Eample
<Text {…testId(‘testId-1’)}>text one
<Text {…testId(‘testId-1’)}}>text two
Orchestrated Sample
export default class CountrySelectorWidget extends Component {
…
render() {
const { country, messages } = this.props;
return (
<TouchableOpacity
{…testId(‘ddlbCountrySelector’)}
onPress={() => {
this.props.onCountryPress();
this.setState({ isCountryFieldDirty: true });
}}
style={style.container}>
{country
? localisedCountryName(country.countryCode, messages)
: messages.SG_COUNTRY_SELECTION_LABEL}
<Icon
style={{ position: 'absolute', bottom: 5, right: -10 }}
name={'downArrow'}
fill={ThemeColors.BLACK}
height={15}
widht={15}
/>
</TouchableOpacity>
<VaillantText
style={{
padding: 5,
paddingHorizontal: 0,
color: ThemeColors.ERROR
}}>
{this.props.showCountryError
? messages.SG_COUNTRY_SELECTION_LABEL_ERROR
: ' '}
</VaillantText>
{this.props.showDropdown && (
<View style={style.itemContainer}>
<ScrollView accessible={false}>
{countries[Config.COMPANY_NAME].map((country, key) => {
return (
<TouchableOpacity
{...testId('ddlbCountrySelection')}
key={key}
style={{ height: 40, justifyContent: 'center' }}
onPress={() => this.props.onCountryPress(country)}>
<VaillantText>
{localisedCountryName(country.countryCode, messages)}
</VaillantText>
</TouchableOpacity>
);
})}
</ScrollView>
</View>
)}
</View>
);
}
}
If you need any additinal infos, don’t be afraid to ask.
