Skip to content
Permalink
Browse files
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
  • Loading branch information
Marc Mulcahy authored and facebook-github-bot committed Sep 2, 2019
1 parent 0165489 commit 7b35f427fd66cb0f36921b992095fe5b3c14d8b9
Showing 25 changed files with 19 additions and 208 deletions.
@@ -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}
@@ -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}>
@@ -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}
@@ -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}
@@ -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,
@@ -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}
@@ -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,
@@ -19,7 +19,6 @@ const UIView = {
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityStates: true,
accessibilityState: true,
accessibilityHint: true,
importantForAccessibility: true,
@@ -121,7 +121,6 @@ const ReactNativeViewConfig = {
accessibilityLabel: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityStates: true,
accessibilityState: true,
accessibilityViewIsModal: true,
accessible: true,
@@ -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,
@@ -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,

/**
@@ -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',
],
};
@@ -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
@@ -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
{
@@ -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 {
@@ -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,

/**
@@ -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) {
@@ -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;
@@ -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;

@@ -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);

0 comments on commit 7b35f42

Please sign in to comment.