Permalink
Browse files

accessibilityTraits + accessibilityComponentType >> accessibilityRole…

… + accessibilityStates 2/3

Summary:
Previously, I created two props, `accessibilityRole` and `accessibilityStates` for view. These props were intended to be a cross-platform solution to replace  `accessibilityComponentType` on Android and `accessibilityTraits` on iOS.

In this stack, I ran a code mod to replace instances of the two old properties used in our codebase with the new ones.
For this diff, I did a search for all the remnant uses of `accessibilityComponentType` that was not caught by my script, and I manually changed them to `accessibilityRole` and `accessibilityStates`. If the same prop also set `accessibilityTraits` I also removed that here because the two new props works on both platforms.

It was difficult to write a script for this, because most of them were contextual changes.
Out of the contextual changes, most of them followed one of these two patterns:

Before:

```
const accessibilityComponentType = 'button';
const accessibilityTraits = ['button'];

if (this.props.checked) {
  accessibilityTraits.push('selected');
}
if (this.props.disabled) {
 accessibilityTraits.push('disabled');
}

      contentView = (
        <AdsManagerTouchableHighlight
          accessibilityComponentType={accessibilityComponentType}
          accessibilityTraits={accessibilityTraits}
```

After:
      const accessibilityRole = 'button';
      const accessibilityStates = [];

        if (this.props.checked) {
          accessibilityStates.push('selected');
        }
        if (this.props.disabled) {
           accessibilityStates.push('disabled');
        }

      contentView = (
        <AdsManagerTouchableHighlight
          accessibilityRole={accessibilityRole}
          accessibilityStates={accessibilityStates}

Before:

```
  <PressableBackground
          accessible={this.props.accessible}
          accessibilityLabel={this.props.accessibilityLabel}
          accessibilityTraits={this.props.accessibilityTraits}
```

After:

```
  <PressableBackground
          accessible={this.props.accessible}
          accessibilityLabel={this.props.accessibilityLabel}
          accessibilityRole={this.props.accessibilityRole}
          accessibilityRole={this.props.accessibilityStates}
```

In addition to changing the props on the components,
Another fix I had to do was to add props  accessibilityRole and accessibilityStates to components that don't directly inherit properties from view including text input and touchables.

Reviewed By: PeteTheHeat

Differential Revision: D8943499

fbshipit-source-id: fbb40a5e5f5d630b0fe56a009ff24635d4c8cc93
  • Loading branch information...
ziqichen6 authored and facebook-github-bot committed Jul 26, 2018
1 parent 50e4001 commit 121e2e5ca6cdb17051c6d8072072f7f480ac2015
@@ -109,11 +109,11 @@ class Button extends React.Component<{
buttonStyles.push({backgroundColor: color});
}
}
const accessibilityTraits = ['button'];
const accessibilityStates = [];
if (disabled) {
buttonStyles.push(styles.buttonDisabled);
textStyles.push(styles.textDisabled);
accessibilityTraits.push('disabled');
accessibilityStates.push('disabled');
}
invariant(
typeof title === 'string',
@@ -125,9 +125,9 @@ class Button extends React.Component<{
Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
return (
<Touchable
accessibilityComponentType="button"
accessibilityLabel={accessibilityLabel}
accessibilityTraits={accessibilityTraits}
accessibilityRole="button"
accessibilityStates={accessibilityStates}
hasTVPreferredFocus={hasTVPreferredFocus}
testID={testID}
disabled={disabled}
@@ -971,7 +971,8 @@ const TextInput = createReactClass({
rejectResponderTermination={true}
accessible={props.accessible}
accessibilityLabel={props.accessibilityLabel}
accessibilityTraits={props.accessibilityTraits}
accessibilityRole={props.accessibilityRole}
accessibilityStates={props.accessibilityStates}
nativeID={this.props.nativeID}
testID={props.testID}>
{textContainer}
@@ -1022,7 +1023,8 @@ const TextInput = createReactClass({
rejectResponderTermination={true}
accessible={props.accessible}
accessibilityLabel={props.accessibilityLabel}
accessibilityTraits={props.accessibilityTraits}
accessibilityRole={props.accessibilityRole}
accessibilityStates={props.accessibilityStates}
nativeID={this.props.nativeID}
testID={props.testID}>
{textContainer}
@@ -1082,7 +1084,8 @@ const TextInput = createReactClass({
onPress={this._onPress}
accessible={this.props.accessible}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityRole={this.props.accessibilityRole}
accessibilityStates={this.props.accessibilityStates}
nativeID={this.props.nativeID}
testID={this.props.testID}>
{textContainer}
@@ -161,8 +161,8 @@ const TouchableBounce = ((createReactClass({
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityHint={this.props.accessibilityHint}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
accessibilityRole={this.props.accessibilityRole}
accessibilityStates={this.props.accessibilityStates}
nativeID={this.props.nativeID}
testID={this.props.testID}
hitSlop={this.props.hitSlop}
@@ -349,8 +349,8 @@ const TouchableHighlight = ((createReactClass({
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityHint={this.props.accessibilityHint}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
accessibilityRole={this.props.accessibilityRole}
accessibilityStates={this.props.accessibilityStates}
style={StyleSheet.compose(
this.props.style,
this.state.extraUnderlayStyle,
@@ -269,8 +269,8 @@ const TouchableNativeFeedback = createReactClass({
[drawableProp]: this.props.background,
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
accessibilityComponentType: this.props.accessibilityComponentType,
accessibilityTraits: this.props.accessibilityTraits,
accessibilityRole: this.props.accessibilityRole,
accessibilityStates: this.props.accessibilityStates,
children,
testID: this.props.testID,
onLayout: this.props.onLayout,
@@ -257,8 +257,8 @@ const TouchableOpacity = ((createReactClass({
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityHint={this.props.accessibilityHint}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
accessibilityRole={this.props.accessibilityRole}
accessibilityStates={this.props.accessibilityStates}
style={[this.props.style, {opacity: this.state.anim}]}
nativeID={this.props.nativeID}
testID={this.props.testID}
@@ -32,7 +32,7 @@ import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
import type {
AccessibilityComponentType,
AccessibilityRole,
AccessibilityState,
AccessibilityStates as AccessibilityStatesFlow,
AccessibilityTraits as AccessibilityTraitsFlow,
} from 'ViewAccessibility';
@@ -49,7 +49,7 @@ export type Props = $ReadOnly<{|
| any,
accessibilityHint?: string,
accessibilityRole?: ?AccessibilityRole,
accessibilityStates?: ?Array<AccessibilityState>,
accessibilityStates?: ?AccessibilityStatesFlow,
accessibilityTraits?: ?AccessibilityTraitsFlow,
children?: ?React.Node,
delayLongPress?: ?number,
@@ -252,6 +252,8 @@ const TouchableWithoutFeedback = ((createReactClass({
accessibilityLabel: this.props.accessibilityLabel,
accessibilityHint: this.props.accessibilityHint,
accessibilityComponentType: this.props.accessibilityComponentType,
accessibilityRole: this.props.accessibilityRole,
accessibilityStates: this.props.accessibilityStates,
accessibilityTraits: this.props.accessibilityTraits,
nativeID: this.props.nativeID,
testID: this.props.testID,
@@ -119,7 +119,7 @@ class AccessibilityAndroidExample extends React.Component {
onPress={() =>
ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)
}
accessibilityComponentType="button">
accessibilityRole="button">
<View style={styles.embedded}>
<Text>Click me</Text>
<Text>Or not</Text>
@@ -195,8 +195,7 @@ class TouchableFeedbackEvents extends React.Component<{}, $FlowFixMeState> {
style={styles.wrapper}
testID="touchable_feedback_events_button"
accessibilityLabel="touchable feedback events"
accessibilityTraits="button"
accessibilityComponentType="button"
accessibilityRole="button"
onPress={() => this._appendEvent('press')}
onPressIn={() => this._appendEvent('pressIn')}
onPressOut={() => this._appendEvent('pressOut')}

0 comments on commit 121e2e5

Please sign in to comment.