diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 7ab93dc676f..110b933f15d 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -166,8 +166,12 @@ public abstract class BaseViewManager() { + @Override + public Object answer(InvocationOnMock invocation) throws Throwable { + return new JavaOnlyMap(); + } + }); } @Test @@ -44,4 +67,13 @@ public class BaseViewManagerTest { mViewManager.setAccessibilityRole(mView, "image"); assertThat(mView.getTag(R.id.accessibility_role)).isEqualTo(AccessibilityRole.IMAGE); } + + @Test + public void testAccessibilityStateSelected() { + WritableMap accessibilityState = Arguments.createMap(); + accessibilityState.putBoolean("selected", true); + mViewManager.setViewState(mView, accessibilityState); + assertThat(mView.getTag(R.id.accessibility_state)).isEqualTo(accessibilityState); + assertThat(mView.isSelected()).isEqualTo(true); + } } diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index d13b53db474..b975bf5bc1c 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -12,6 +12,7 @@ const React = require('react'); const { AccessibilityInfo, + TextInput, Button, Image, Text, @@ -31,12 +32,32 @@ const mixedCheckboxImageSource = require('./mixed.png'); const {createRef} = require('react'); const styles = StyleSheet.create({ + default: { + borderWidth: StyleSheet.hairlineWidth, + borderColor: '#0f0f0f', + flex: 1, + fontSize: 13, + padding: 4, + }, + touchable: { + backgroundColor: 'blue', + borderColor: 'red', + borderWidth: 1, + borderRadius: 10, + padding: 10, + borderStyle: 'solid', + }, image: { width: 20, height: 20, resizeMode: 'contain', marginRight: 10, }, + containerAlignCenter: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + }, }); class AccessibilityExample extends React.Component { @@ -230,37 +251,53 @@ class SelectionExample extends React.Component { }; render() { + const {isSelected, isEnabled} = this.state; let accessibilityHint = 'click me to select'; - if (this.state.isSelected) { + if (isSelected) { accessibilityHint = 'click me to unselect'; } - if (!this.state.isEnabled) { + if (!isEnabled) { accessibilityHint = 'use the button on the right to enable selection'; } - let buttonTitle = this.state.isEnabled - ? 'Disable selection' - : 'Enable selection'; - + let buttonTitle = isEnabled ? 'Disable selection' : 'Enable selection'; + const touchableHint = ` (touching the TouchableOpacity will ${ + isSelected ? 'disable' : 'enable' + } accessibilityState.selected)`; return ( - + { - if (this.state.isEnabled) { + if (isEnabled) { this.setState({ - isSelected: !this.state.isSelected, + isSelected: !isSelected, }); + } else { + console.warn('selection is disabled, please enable selection.'); } }} accessibilityLabel="element 19" accessibilityState={{ - selected: this.state.isSelected, - disabled: !this.state.isEnabled, + selected: isSelected, + disabled: !isEnabled, }} + style={styles.touchable} accessibilityHint={accessibilityHint}> - Selectable element example + + {`Selectable TouchableOpacity Example ${touchableHint}`} + +