[ReactNative] add importantForAccessibility to accessibility sample app
This commit is contained in:
Родитель
bce7b9c638
Коммит
869ff92dbc
|
@ -27,6 +27,8 @@ var AccessibilityInfo = require('AccessibilityInfo');
|
||||||
var UIExplorerBlock = require('./UIExplorerBlock');
|
var UIExplorerBlock = require('./UIExplorerBlock');
|
||||||
var UIExplorerPage = require('./UIExplorerPage');
|
var UIExplorerPage = require('./UIExplorerPage');
|
||||||
|
|
||||||
|
var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
|
||||||
|
|
||||||
var AccessibilityAndroidExample = React.createClass({
|
var AccessibilityAndroidExample = React.createClass({
|
||||||
|
|
||||||
statics: {
|
statics: {
|
||||||
|
@ -38,6 +40,8 @@ var AccessibilityAndroidExample = React.createClass({
|
||||||
return {
|
return {
|
||||||
count: 0,
|
count: 0,
|
||||||
talkbackEnabled: false,
|
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() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<UIExplorerPage title={'Accessibility'}>
|
<UIExplorerPage title={'Accessibility'}>
|
||||||
|
@ -148,6 +164,77 @@ var AccessibilityAndroidExample = React.createClass({
|
||||||
</TouchableWithoutFeedback>
|
</TouchableWithoutFeedback>
|
||||||
</UIExplorerBlock>
|
</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>
|
</UIExplorerPage>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -158,6 +245,12 @@ var styles = StyleSheet.create({
|
||||||
backgroundColor: 'yellow',
|
backgroundColor: 'yellow',
|
||||||
padding:10,
|
padding:10,
|
||||||
},
|
},
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'white',
|
||||||
|
padding: 10,
|
||||||
|
height:150,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = AccessibilityAndroidExample;
|
module.exports = AccessibilityAndroidExample;
|
||||||
|
|
Загрузка…
Ссылка в новой задаче