UNPKG

crn-cli

Version:

The Ctrip React Native CLI Tools

1 lines 6.96 kB
__d(function(g,r,i,a,m,e,d){'use strict';var t=r(d[0]),l=r(d[1]),c=r(d[2]),n=r(d[3]),s=r(d[4]),o=r(d[5]),b=r(d[6]),u=b.AccessibilityInfo,h=b.StyleSheet,y=b.Text,E=b.View,w=b.ToastAndroid,p=b.TouchableWithoutFeedback,f=r(d[7]),A=r(d[8]),k=['auto','yes','no','no-hide-descendants'],T=(function(b){function h(){var l,s;t(this,h);for(var o=arguments.length,b=new Array(o),u=0;u<o;u++)b[u]=arguments[u];return(s=c(this,(l=n(h)).call.apply(l,[this].concat(b)))).state={count:0,backgroundImportantForAcc:0,forgroundImportantForAcc:0,screenReaderEnabled:!1},s._handleScreenReaderToggled=function(t){s.setState({screenReaderEnabled:t})},s._addOne=function(){s.setState({count:++s.state.count})},s._changeBackgroundImportantForAcc=function(){s.setState({backgroundImportantForAcc:(s.state.backgroundImportantForAcc+1)%4})},s._changeForgroundImportantForAcc=function(){s.setState({forgroundImportantForAcc:(s.state.forgroundImportantForAcc+1)%4})},s}return s(h,b),l(h,[{key:"componentDidMount",value:function(){var t=this;u.addEventListener('change',this._handleScreenReaderToggled),u.fetch().done(function(l){t.setState({screenReaderEnabled:l})})}},{key:"componentWillUnmount",value:function(){u.removeEventListener('change',this._handleScreenReaderToggled)}},{key:"render",value:function(){return o.createElement(A,{title:'Accessibility'},o.createElement(f,{title:"Nonaccessible view with TextViews"},o.createElement(E,null,o.createElement(y,{style:{color:'green'}},"This is"),o.createElement(y,{style:{color:'blue'}},"nontouchable normal view."))),o.createElement(f,{title:"Accessible view with TextViews wihout label"},o.createElement(E,{accessible:!0},o.createElement(y,{style:{color:'green'}},"This is"),o.createElement(y,{style:{color:'blue'}},"nontouchable accessible view without label."))),o.createElement(f,{title:"Accessible view with TextViews with label"},o.createElement(E,{accessible:!0,accessibilityLabel:"I have label, so I read it instead of embedded text."},o.createElement(y,{style:{color:'green'}},"This is"),o.createElement(y,{style:{color:'blue'}},"nontouchable accessible view with label."))),o.createElement(f,{title:"Touchable with accessibilityRole = header"},o.createElement(E,{accessible:!0,accessibilityLabel:"I'm a header, so I read it instead of embedded text.",accessibilityRole:"header"},o.createElement(y,{style:{color:'green'}},"This is"),o.createElement(y,{style:{color:'blue'}},"nontouchable accessible view with label."))),o.createElement(f,{title:"Touchable with accessibilityRole = link"},o.createElement(p,{onPress:function(){return w.show('Toasts work by default',w.SHORT)},accessibilityRole:"link"},o.createElement(E,{style:F.embedded},o.createElement(y,null,"Click me"),o.createElement(y,null,"Or not")))),o.createElement(f,{title:"Touchable with accessibilityRole = button"},o.createElement(p,{onPress:function(){return w.show('Toasts work by default',w.SHORT)},accessibilityRole:"button"},o.createElement(E,{style:F.embedded},o.createElement(y,null,"Click me"),o.createElement(y,null,"Or not")))),o.createElement(f,{title:"Disabled Touchable with accessibilityRole = button"},o.createElement(p,{onPress:function(){return w.show('Toasts work by default',w.SHORT)},accessibilityRole:"button",accessibilityStates:['disabled'],disabled:!0},o.createElement(E,null,o.createElement(y,null,"I am disabled"),o.createElement(y,null,"Clicking me will not trigger any action.")))),o.createElement(f,{title:"Touchable with accessibilityRole = button and accessibilityHint"},o.createElement(p,{onPress:function(){return w.show('Toasts work by default',w.SHORT)},accessibilityRole:"button",accessibilityHint:"Triggers Toasts"},o.createElement(E,null,o.createElement(y,null,"Click Me!")))),o.createElement(f,{title:"Accessible View with hint, role, and state"},o.createElement(E,{accessible:!0,accessibilityRole:"button",accessibilityStates:['selected'],accessibilityHint:"accessibility hint"},o.createElement(y,null,"Accessible view with hint, role, and state"),o.createElement(y,{style:{color:'gray'}},"Talkback will say: accessibility hint button, selected",' '))),o.createElement(f,{title:"Accessible View with label, hint, role, and state"},o.createElement(E,{accessible:!0,accessibilityLabel:"accessibility Label",accessibilityRole:"button",accessibilityStates:['selected'],accessibilityHint:"accessibility Hint"},o.createElement(y,null,"Accessible view with label, hint, role, and state"),o.createElement(y,{style:{color:'gray'}},"Talkback will say: accessibility label, hint button, selected",' '))),o.createElement(f,{title:"Accessible View with no other properties set"},o.createElement(E,{accessible:!0},o.createElement(y,null,"This accessible view has no label, so the text is read."))),o.createElement(f,{title:"LiveRegion"},o.createElement(p,{onPress:this._addOne},o.createElement(E,{style:F.embedded},o.createElement(y,null,"Click me"))),o.createElement(y,{accessibilityLiveRegion:"polite"},"Clicked ",this.state.count," times")),o.createElement(f,{title:"Check if the screen reader is enabled"},o.createElement(y,null,"The screen reader is",' ',this.state.screenReaderEnabled?'enabled':'disabled',".")),o.createElement(f,{title:"Overlapping views and importantForAccessibility property"},o.createElement(E,{style:F.container},o.createElement(E,{style:{position:'absolute',left:10,top:10,right:10,height:100,backgroundColor:'green'},accessible:!0,accessibilityLabel:"First layout",importantForAccessibility:k[this.state.backgroundImportantForAcc]},o.createElement(E,{accessible:!0},o.createElement(y,{style:{fontSize:25}},"Hello"))),o.createElement(E,{style:{position:'absolute',left:10,top:25,right:10,height:110,backgroundColor:'yellow',opacity:.5},accessible:!0,accessibilityLabel:"Second layout",importantForAccessibility:k[this.state.forgroundImportantForAcc]},o.createElement(E,{accessible:!0},o.createElement(y,{style:{fontSize:20}},"world")))),o.createElement(p,{onPress:this._changeBackgroundImportantForAcc},o.createElement(E,{style:F.embedded},o.createElement(y,null,"Change importantForAccessibility for background layout."))),o.createElement(E,{accessible:!0},o.createElement(y,null,"Background layout importantForAccessibility"),o.createElement(y,null,k[this.state.backgroundImportantForAcc])),o.createElement(p,{onPress:this._changeForgroundImportantForAcc},o.createElement(E,{style:F.embedded},o.createElement(y,null,"Change importantForAccessibility for forground layout."))),o.createElement(E,{accessible:!0},o.createElement(y,null,"Forground layout importantForAccessibility"),o.createElement(y,null,k[this.state.forgroundImportantForAcc]))))}}]),h})(o.Component),F=h.create({embedded:{backgroundColor:'yellow',padding:10},container:{flex:1,backgroundColor:'white',padding:10,height:150}});e.title='Accessibility',e.description='Examples of using Accessibility API.',e.examples=[{title:'Accessibility elements',render:function(){return o.createElement(T,null)}}]},666826,[3,4,5,8,9,11,15,666679,666681]);