react-native-macos/Libraries/Components/Touchable
Ziqi Chen 121e2e5ca6 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
2018-07-25 23:48:26 -07:00
..
__mocks__ Prettier React Native Libraries 2018-05-10 19:10:38 -07:00
__tests__ Update Jest snapshots 2018-05-29 17:30:16 -07:00
BoundingDimensions.js Prettier React Native Libraries 2018-05-10 19:10:38 -07:00
PooledClass.js Prettier React Native Libraries 2018-05-10 19:10:38 -07:00
Position.js Prettier React Native Libraries 2018-05-10 19:10:38 -07:00
Touchable.js Upgrade Prettier to 1.13.6 on fbsource 2018-06-27 03:32:42 -07:00
TouchableBounce.js accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 2/3 2018-07-25 23:48:26 -07:00
TouchableHighlight.js accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 2/3 2018-07-25 23:48:26 -07:00
TouchableNativeFeedback.android.js accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 2/3 2018-07-25 23:48:26 -07:00
TouchableNativeFeedback.ios.js Prettier React Native Libraries 2018-05-10 19:10:38 -07:00
TouchableOpacity.js accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 2/3 2018-07-25 23:48:26 -07:00
TouchableWithoutFeedback.js accessibilityTraits + accessibilityComponentType >> accessibilityRole + accessibilityStates 2/3 2018-07-25 23:48:26 -07:00
ensureComponentIsNative.js Prettier React Native Libraries 2018-05-10 19:10:38 -07:00
ensurePositiveDelayProps.js Prettier React Native Libraries 2018-05-10 19:10:38 -07:00