diff --git a/Examples/UIExplorer/AccessibilityAndroidExample.js b/Examples/UIExplorer/AccessibilityAndroidExample.js index 92a511bcc..d75907a86 100644 --- a/Examples/UIExplorer/AccessibilityAndroidExample.js +++ b/Examples/UIExplorer/AccessibilityAndroidExample.js @@ -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 ( @@ -148,6 +164,77 @@ var AccessibilityAndroidExample = React.createClass({ + + + + + + Hello + + + + + + + world + + + + + + + + Change importantForAccessibility for background layout. + + + + + + Background layout importantForAccessibility + + + {importantForAccessibilityValues[this.state.backgroundImportantForAcc]} + + + + + + Change importantForAccessibility for forground layout. + + + + + + Forground layout importantForAccessibility + + + {importantForAccessibilityValues[this.state.forgroundImportantForAcc]} + + + + ); }, @@ -158,6 +245,12 @@ var styles = StyleSheet.create({ backgroundColor: 'yellow', padding:10, }, + container: { + flex: 1, + backgroundColor: 'white', + padding: 10, + height:150, + }, }); module.exports = AccessibilityAndroidExample;