status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-28 02:04:55 +00:00
Code Issues Projects Releases Wiki Activity

[ReactNative] add importantForAccessibility to accessibility sample app

Browse Source
This commit is contained in:
Dorota Kapturkiewicz 2015-08-17 06:20:07 -07:00
parent bce7b9c638
commit 869ff92dbc
1 changed files with 93 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
Examples/UIExplorer/AccessibilityAndroidExample.js
View File

@ -27,6 +27,8 @@ var AccessibilityInfo = require('AccessibilityInfo');
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
var AccessibilityAndroidExample = React.createClass({
statics: {
@ -38,6 +40,8 @@ var AccessibilityAndroidExample = React.createClass({
return {
count: 0,
talkbackEnabled: false,
backgroundImportantForAcc: 0,
forgroundImportantForAcc: 0,
};
},
@ -79,6 +83,18 @@ var AccessibilityAndroidExample = React.createClass({
});
},
_changeBackgroundImportantForAcc: function() {
this.setState({
backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
});
},
_changeForgroundImportantForAcc: function() {
this.setState({
forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
});
},
render: function() {
return (
<UIExplorerPage title={'Accessibility'}>
@ -148,6 +164,77 @@ var AccessibilityAndroidExample = React.createClass({
</TouchableWithoutFeedback>
</UIExplorerBlock>
<UIExplorerBlock title="Overlapping views and importantForAccessibility property">
<View style={styles.container}>
<View
style={{
position: 'absolute',
left: 10,
top: 10,
right: 10,
height: 100,
backgroundColor: 'green'}}
accessible={true}
accessibilityLabel="First layout"
importantForAccessibility={
importantForAccessibilityValues[this.state.backgroundImportantForAcc]}>
<View accessible={true}>
<Text style={{fontSize: 25}}>
Hello
</Text>
</View>
</View>
<View
style={{
position: 'absolute',
left: 10,
top: 25,
right: 10,
height: 110,
backgroundColor: 'yellow', opacity: 0.5}}
accessible={true}
accessibilityLabel="Second layout"
importantForAccessibility={
importantForAccessibilityValues[this.state.forgroundImportantForAcc]}>
<View accessible={true}>
<Text style={{fontSize: 20}}>
world
</Text>
</View>
</View>
</View>
<TouchableWithoutFeedback onPress={this._changeBackgroundImportantForAcc}>
<View style={styles.embedded}>
<Text>
Change importantForAccessibility for background layout.
</Text>
</View>
</TouchableWithoutFeedback>
<View accessible={true}>
<Text>
Background layout importantForAccessibility
</Text>
<Text>
{importantForAccessibilityValues[this.state.backgroundImportantForAcc]}
</Text>
</View>
<TouchableWithoutFeedback onPress={this._changeForgroundImportantForAcc}>
<View style={styles.embedded}>
<Text>
Change importantForAccessibility for forground layout.
</Text>
</View>
</TouchableWithoutFeedback>
<View accessible={true}>
<Text>
Forground layout importantForAccessibility
</Text>
<Text>
{importantForAccessibilityValues[this.state.forgroundImportantForAcc]}
</Text>
</View>
</UIExplorerBlock>
</UIExplorerPage>
);
},
@ -158,6 +245,12 @@ var styles = StyleSheet.create({
backgroundColor: 'yellow',
padding:10,
},
container: {
flex: 1,
backgroundColor: 'white',
padding: 10,
height:150,
},
});
module.exports = AccessibilityAndroidExample;