[Android] Selected State does not annonce when TextInput Component selected

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -166,8 +166,12 @@ public void setViewState(@NonNull T view, @Nullable ReadableMap accessibilitySta
     if (accessibilityState == null) {
       return;
     }
+    if (accessibilityState.hasKey("selected")) {
+      view.setSelected(accessibilityState.getBoolean("selected"));
+    } else {
+      view.setSelected(false);
+    }
     view.setTag(R.id.accessibility_state, accessibilityState);
-    view.setSelected(false);
     view.setEnabled(true);
 
     // For states which don't have corresponding methods in

ReactAndroid/src/test/java/com/facebook/react/uimanager/BaseViewManagerTest.java

@@ -10,26 +10,49 @@
 import static org.fest.assertions.api.Assertions.assertThat;
 
 import com.facebook.react.R;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.JavaOnlyMap;
+import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.ReactAccessibilityDelegate.AccessibilityRole;
 import com.facebook.react.views.view.ReactViewGroup;
 import com.facebook.react.views.view.ReactViewManager;
 import java.util.Locale;
 import org.junit.Before;
+import org.junit.Rule;
 import org.junit.Test;
 import org.junit.runner.RunWith;
+import org.mockito.invocation.InvocationOnMock;
+import org.mockito.stubbing.Answer;
+import org.powermock.api.mockito.PowerMockito;
+import org.powermock.core.classloader.annotations.PowerMockIgnore;
+import org.powermock.core.classloader.annotations.PrepareForTest;
+import org.powermock.modules.junit4.rule.PowerMockRule;
 import org.robolectric.RobolectricTestRunner;
 import org.robolectric.RuntimeEnvironment;
 
+@PrepareForTest({Arguments.class})
 @RunWith(RobolectricTestRunner.class)
+@PowerMockIgnore({"org.mockito.*", "org.robolectric.*", "androidx.*", "android.*"})
 public class BaseViewManagerTest {
 
+  @Rule public PowerMockRule rule = new PowerMockRule();
+
   private BaseViewManager mViewManager;
   private ReactViewGroup mView;
 
   @Before
   public void setUp() {
     mViewManager = new ReactViewManager();
     mView = new ReactViewGroup(RuntimeEnvironment.application);
+    PowerMockito.mockStatic(Arguments.class);
+    PowerMockito.when(Arguments.createMap())
+        .thenAnswer(
+            new Answer<Object>() {
+              @Override
+              public Object answer(InvocationOnMock invocation) throws Throwable {
+                return new JavaOnlyMap();
+              }
+            });
   }
 
   @Test
@@ -44,4 +67,13 @@ public void testAccessibilityRoleTurkish() {
     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);
+  }
 }

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 (
-      <View style={{flex: 1, flexDirection: 'row'}}>
+      <View style={styles.containerAlignCenter}>
         <TouchableOpacity
           ref={this.selectableElement}
           accessible={true}
           onPress={() => {
-            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}>
-          <Text>Selectable element example</Text>
+          <Text style={{color: 'white'}}>
+            {`Selectable TouchableOpacity Example ${touchableHint}`}
+          </Text>
         </TouchableOpacity>
+        <TextInput
+          accessibilityLabel="element 20"
+          accessibilityState={{
+            selected: isSelected,
+          }}
+          multiline={true}
+          placeholder={`TextInput Example - ${
+            isSelected ? 'enabled' : 'disabled'
+          } selection`}
+        />
         <Button
           onPress={() => {
             this.setState({