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
This commit is contained in:
Ziqi Chen
2018-07-25 23:37:16 -07:00
committed by Facebook Github Bot
parent 50e400128e
commit 121e2e5ca6
9 changed files with 24 additions and 20 deletions

View File

@@ -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}