Remove deprecated accessibilityStates property. (#26168)

Summary:
We added the accessibilityState property as a more semantically rich way for components to describe information about their state to accessibility services. This PR removes the old accessibilityStates property.

 <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->

## Changelog

[General] [Change] - Remove accessibilityStates property.
Pull Request resolved: #26168

Test Plan: Ensure that RNTester accessibility examples function properly on both iOS and Android.

Differential Revision: D17152891

Pulled By: cpojer

fbshipit-source-id: d71d3cf0f2e0846979d2ba104b6c69e4e5725252

Author: Marc Mulcahy

Libraries/Components/Button.js

@@ -153,11 +153,11 @@ class Button extends React.Component<ButtonProps> {
         buttonStyles.push({backgroundColor: color});
       }
     }
-    const accessibilityStates = [];
+    const accessibilityState = {};
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
       textStyles.push(styles.textDisabled);
-      accessibilityStates.push('disabled');
+      accessibilityState.disabled = true;
     }
     invariant(
       typeof title === 'string',
@@ -171,7 +171,7 @@ class Button extends React.Component<ButtonProps> {
       <Touchable
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
-        accessibilityStates={accessibilityStates}
+        accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}
         nextFocusDown={nextFocusDown}
         nextFocusForward={nextFocusForward}

Libraries/Components/TextInput/TextInput.js

@@ -991,7 +991,6 @@ const TextInput = createReactClass({
         accessible={props.accessible}
         accessibilityLabel={props.accessibilityLabel}
         accessibilityRole={props.accessibilityRole}
-        accessibilityStates={props.accessibilityStates}
         accessibilityState={props.accessibilityState}
         nativeID={this.props.nativeID}
         testID={props.testID}>
@@ -1044,7 +1043,6 @@ const TextInput = createReactClass({
         accessible={props.accessible}
         accessibilityLabel={props.accessibilityLabel}
         accessibilityRole={props.accessibilityRole}
-        accessibilityStates={props.accessibilityStates}
         accessibilityState={props.accessibilityState}
         nativeID={this.props.nativeID}
         testID={props.testID}>
@@ -1100,7 +1098,6 @@ const TextInput = createReactClass({
         accessible={this.props.accessible}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
         nativeID={this.props.nativeID}
         testID={this.props.testID}>

Libraries/Components/Touchable/TouchableBounce.js

@@ -180,7 +180,6 @@ const TouchableBounce = ((createReactClass({
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -407,7 +407,6 @@ const TouchableHighlight = ((createReactClass({
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -313,7 +313,6 @@ const TouchableNativeFeedback = createReactClass({
       accessible: this.props.accessible !== false,
       accessibilityLabel: this.props.accessibilityLabel,
       accessibilityRole: this.props.accessibilityRole,
-      accessibilityStates: this.props.accessibilityStates,
       accessibilityState: this.props.accessibilityState,
       accessibilityActions: this.props.accessibilityActions,
       onAccessibilityAction: this.props.onAccessibilityAction,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -310,7 +310,6 @@ const TouchableOpacity = ((createReactClass({
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityStates={this.props.accessibilityStates}
         accessibilityState={this.props.accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -31,7 +31,6 @@ import type {
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   AccessibilityRole,
-  AccessibilityStates,
   AccessibilityState,
   AccessibilityActionInfo,
   AccessibilityActionEvent,
@@ -53,7 +52,6 @@ const OVERRIDE_PROPS = [
   'accessibilityHint',
   'accessibilityIgnoresInvertColors',
   'accessibilityRole',
-  'accessibilityStates',
   'accessibilityState',
   'accessibilityActions',
   'onAccessibilityAction',
@@ -71,7 +69,6 @@ export type Props = $ReadOnly<{|
   accessibilityHint?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityRole?: ?AccessibilityRole,
-  accessibilityStates?: ?AccessibilityStates,
   accessibilityState?: ?AccessibilityState,
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   children?: ?React.Node,
@@ -112,7 +109,6 @@ const TouchableWithoutFeedback = ((createReactClass({
     accessibilityHint: PropTypes.string,
     accessibilityIgnoresInvertColors: PropTypes.bool,
     accessibilityRole: PropTypes.oneOf(DeprecatedAccessibilityRoles),
-    accessibilityStates: PropTypes.array,
     accessibilityState: PropTypes.object,
     accessibilityActions: PropTypes.array,
     onAccessibilityAction: PropTypes.func,

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -19,7 +19,6 @@ const UIView = {
   accessibilityLabel: true,
   accessibilityLiveRegion: true,
   accessibilityRole: true,
-  accessibilityStates: true,
   accessibilityState: true,
   accessibilityHint: true,
   importantForAccessibility: true,

Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -121,7 +121,6 @@ const ReactNativeViewConfig = {
     accessibilityLabel: true,
     accessibilityLiveRegion: true,
     accessibilityRole: true,
-    accessibilityStates: true,
     accessibilityState: true,
     accessibilityViewIsModal: true,
     accessible: true,

Libraries/Components/View/ViewAccessibility.js

@@ -42,18 +42,6 @@ export type AccessibilityRole =
   | 'timer'
   | 'toolbar';
 
-// This must be kept in sync with the AccessibilityStatesMask in RCTViewManager.m
-export type AccessibilityStates = $ReadOnlyArray<
-  | 'disabled'
-  | 'selected'
-  | 'checked'
-  | 'unchecked'
-  | 'busy'
-  | 'expanded'
-  | 'collapsed'
-  | 'hasPopup',
->;
-
 // the info associated with an accessibility action
 export type AccessibilityActionInfo = $ReadOnly<{
   name: string,

Libraries/Components/View/ViewPropTypes.js

@@ -17,7 +17,6 @@ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {TVViewProps} from '../AppleTV/TVViewPropTypes';
 import type {
   AccessibilityRole,
-  AccessibilityStates,
   AccessibilityState,
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -413,7 +412,6 @@ export type ViewProps = $ReadOnly<{|
   /**
    * Indicates to accessibility services that UI Component is in a specific State.
    */
-  accessibilityStates?: ?AccessibilityStates,
   accessibilityState?: ?AccessibilityState,
 
   /**

Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js

@@ -41,15 +41,4 @@ module.exports = {
     'timer',
     'toolbar',
   ],
-  // This must be kept in sync with the AccessibilityStatesMask in RCTViewManager.m
-  DeprecatedAccessibilityStates: [
-    'selected',
-    'disabled',
-    'checked',
-    'unchecked',
-    'busy',
-    'expanded',
-    'collapsed',
-    'hasPopup',
-  ],
 };

Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes.js

@@ -16,10 +16,7 @@ const DeprecatedViewStylePropTypes = require('./DeprecatedViewStylePropTypes');
 const PlatformViewPropTypes = require('../Components/View/PlatformViewPropTypes');
 const PropTypes = require('prop-types');
 
-const {
-  DeprecatedAccessibilityRoles,
-  DeprecatedAccessibilityStates,
-} = require('./DeprecatedViewAccessibility');
+const {DeprecatedAccessibilityRoles} = require('./DeprecatedViewAccessibility');
 
 const stylePropType: ReactPropsCheckType = DeprecatedStyleSheetPropType(
   DeprecatedViewStylePropTypes,
@@ -104,23 +101,6 @@ module.exports = {
     | 'toolbar',
   >),
 
-  /**
-   * Indicates to accessibility services that UI Component is in a specific State.
-   */
-  accessibilityStates: (PropTypes.arrayOf(
-    PropTypes.oneOf(DeprecatedAccessibilityStates),
-  ): React$PropType$Primitive<
-    Array<
-      | 'selected'
-      | 'disabled'
-      | 'checked'
-      | 'unchecked'
-      | 'busy'
-      | 'expanded'
-      | 'collapsed'
-      | 'hasPopup',
-    >,
-  >),
   accessibilityState: PropTypes.object,
   /**
    * Indicates to accessibility services whether the user should be notified

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec-generated.mm

@@ -487,12 +487,6 @@ + (RCTManagedPointer *)JS_NativeAppState_SpecGetCurrentAppStateSuccessAppState:(
 
   } // namespace react
 } // namespace facebook
-@implementation RCTCxxConvert (NativeAppearance_AppearancePreferences)
-+ (RCTManagedPointer *)JS_NativeAppearance_AppearancePreferences:(id)json
-{
-  return facebook::react::managedPointer<JS::NativeAppearance::AppearancePreferences>(json);
-}
-@end
 folly::Optional<NativeAppearanceColorSchemeName> NSStringToNativeAppearanceColorSchemeName(NSString *value) {
   static NSDictionary *dict = nil;
   static dispatch_once_t onceToken;
@@ -516,6 +510,12 @@ + (RCTManagedPointer *)JS_NativeAppearance_AppearancePreferences:(id)json
   });
   return value.hasValue() ? dict[@(value.value())] : nil;
 }
+@implementation RCTCxxConvert (NativeAppearance_AppearancePreferences)
++ (RCTManagedPointer *)JS_NativeAppearance_AppearancePreferences:(id)json
+{
+  return facebook::react::managedPointer<JS::NativeAppearance::AppearancePreferences>(json);
+}
+@end
 @implementation RCTCxxConvert (NativeAsyncStorage_SpecMultiGetCallbackErrorsElement)
 + (RCTManagedPointer *)JS_NativeAsyncStorage_SpecMultiGetCallbackErrorsElement:(id)json
 {

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec.h

@@ -452,6 +452,13 @@ namespace facebook {
     };
   } // namespace react
 } // namespace facebook
+typedef NS_ENUM(NSInteger, NativeAppearanceColorSchemeName) {
+  NativeAppearanceColorSchemeNameLight = 0,
+  NativeAppearanceColorSchemeNameDark,
+};
+
+folly::Optional<NativeAppearanceColorSchemeName> NSStringToNativeAppearanceColorSchemeName(NSString *value);
+NSString *NativeAppearanceColorSchemeNameToNSString(folly::Optional<NativeAppearanceColorSchemeName> value);
 
 namespace JS {
   namespace NativeAppearance {
@@ -468,13 +475,6 @@ namespace JS {
 @interface RCTCxxConvert (NativeAppearance_AppearancePreferences)
 + (RCTManagedPointer *)JS_NativeAppearance_AppearancePreferences:(id)json;
 @end
-typedef NS_ENUM(NSInteger, NativeAppearanceColorSchemeName) {
-  NativeAppearanceColorSchemeNameLight = 0,
-  NativeAppearanceColorSchemeNameDark,
-};
-
-folly::Optional<NativeAppearanceColorSchemeName> NSStringToNativeAppearanceColorSchemeName(NSString *value);
-NSString *NativeAppearanceColorSchemeNameToNSString(folly::Optional<NativeAppearanceColorSchemeName> value);
 
 namespace JS {
   namespace NativeAsyncStorage {

Libraries/Text/TextProps.js

@@ -19,7 +19,6 @@ import type {Node} from 'react';
 import type {TextStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   AccessibilityRole,
-  AccessibilityStates,
   AccessibilityState,
 } from '../Components/View/ViewAccessibility';
 
@@ -43,7 +42,6 @@ export type TextProps = $ReadOnly<{|
   accessibilityHint?: ?Stringish,
   accessibilityLabel?: ?Stringish,
   accessibilityRole?: ?AccessibilityRole,
-  accessibilityStates?: ?AccessibilityStates,
   accessibilityState?: ?AccessibilityState,
 
   /**

React/Views/RCTView.m

@@ -203,13 +203,6 @@ - (BOOL)didActivateAccessibilityCustomAction:(UIAccessibilityCustomAction *)acti
 - (NSString *)accessibilityValue
 {
   if ((self.accessibilityTraits & SwitchAccessibilityTrait) == SwitchAccessibilityTrait) {
-    for (NSString *state in self.accessibilityStates) {
-      if ([state isEqualToString:@"checked"]) {
-        return @"1";
-      } else if ([state isEqualToString:@"unchecked"]) {
-        return @"0";
-      }
-    }
     for (NSString *state in self.accessibilityState) {
       id val = self.accessibilityState[state];
       if (!val) {
@@ -259,12 +252,6 @@ - (NSString *)accessibilityValue
   if (roleDescription) {
     [valueComponents addObject:roleDescription];
   }
-  for (NSString *state in self.accessibilityStates) {
-    NSString *stateDescription = state ? stateDescriptions[state] : nil;
-    if (stateDescription) {
-      [valueComponents addObject:stateDescription];
-    }
-  }
   for (NSString *state in self.accessibilityState) {
     id val = self.accessibilityState[state];
     if (!val) {

React/Views/RCTViewManager.m

@@ -178,34 +178,6 @@ - (RCTShadowView *)shadowView
   }
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(accessibilityStates, NSArray<NSString *>, RCTView)
-{
-  NSArray<NSString *> *states = json ? [RCTConvert NSStringArray:json] : nil;
-  NSMutableArray *newStates = [NSMutableArray new];
-
-  if (!states) {
-    return;
-  }
-
-  const UIAccessibilityTraits AccessibilityStatesMask = UIAccessibilityTraitNotEnabled | UIAccessibilityTraitSelected;
-  view.reactAccessibilityElement.accessibilityTraits = view.reactAccessibilityElement.accessibilityTraits & ~AccessibilityStatesMask;
-
-  for (NSString *state in states) {
-    if ([state isEqualToString:@"selected"]) {
-      view.reactAccessibilityElement.accessibilityTraits |= UIAccessibilityTraitSelected;
-    } else if ([state isEqualToString:@"disabled"]) {
-      view.reactAccessibilityElement.accessibilityTraits |= UIAccessibilityTraitNotEnabled;
-    } else {
-      [newStates addObject:state];
-    }
-  }
-  if (newStates.count > 0) {
-    view.reactAccessibilityElement.accessibilityStates = newStates;
-  } else {
-    view.reactAccessibilityElement.accessibilityStates = nil;
-  }
-}
-
 RCT_CUSTOM_VIEW_PROPERTY(accessibilityState, NSDictionary, RCTView)
 {
   NSDictionary<NSString *, id> *state = json ? [RCTConvert NSDictionary:json] : nil;

React/Views/UIView+React.h

@@ -117,7 +117,6 @@
  * Accessibility properties
  */
 @property (nonatomic, copy) NSString *accessibilityRole;
-@property (nonatomic, copy) NSArray <NSString *> *accessibilityStates;
 @property (nonatomic, copy) NSDictionary<NSString *, id> *accessibilityState;
 @property (nonatomic, copy) NSArray <NSDictionary *> *accessibilityActions;
 

React/Views/UIView+React.m

@@ -317,16 +317,6 @@ - (void)setAccessibilityRole:(NSString *)accessibilityRole
   objc_setAssociatedObject(self, @selector(accessibilityRole), accessibilityRole, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
 }
 
-- (NSArray<NSString *> *)accessibilityStates
-{
-  return objc_getAssociatedObject(self, _cmd);
-}
-
-- (void)setAccessibilityStates:(NSArray<NSString *> *)accessibilityStates
-{
-  objc_setAssociatedObject(self, @selector(accessibilityStates), accessibilityStates, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
-}
-
 - (NSDictionary<NSString *, id> *)accessibilityState
 {
   return objc_getAssociatedObject(self, _cmd);