Skip to content

Commit

Permalink
accessibilityTraits + accessibilityComponentType >> accessibilityRole…
Browse files Browse the repository at this point in the history
… + accessibilityStates 3/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 the few remaining uses of `accessibilityTraits` that was not caught by my script or the previous diff in the stack, and I manually changed them to `accessibilityRole` and `accessibilityStates`.

Changes in this diff generally followed this pattern:

Before:
```
function accessibilityTraits(props: Props): Array<string> {
  const traits = ['button'];
  if (props.selected) {
    traits.push('selected');
  }
  return traits;
}

  <AdsManagerTouchableHighlight
        accessibilityTraits={accessibilityTraits(this.props)}
```

After:
```
function accessibilityStates(props: Props): Array<AccessibilityState> {
  const states = [];
  if (!props.enabled) {
    states.push('disabled');
  }
  if (props.checked) {
    states.push('selected');
  }
  return states;
}

  <AdsManagerTouchableHighlight
        accessibilityRole="button"
        accessibilityStates={accessibilityStates(this.props)}
```

Reviewed By: PeteTheHeat

Differential Revision: D8944741

fbshipit-source-id: 4b309d9c858e7e831fbf971aca2f546df7a1431d
  • Loading branch information
Ziqi Chen authored and facebook-github-bot committed Jul 26, 2018
1 parent 52a55fd commit 1bc5226
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion RNTester/js/AccessibilityIOSExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ class AccessibilityIOSExample extends React.Component<{}> {
<View accessibilityLabel="Some announcement" accessible={true}>
<Text>Accessibility label example</Text>
</View>
<View accessibilityTraits={['button', 'selected']} accessible={true}>
<View
accessibilityRole="button"
accessibilityStates={['selected']}
accessible={true}>
<Text>Accessibility traits example</Text>
</View>
<Text>
Expand Down

0 comments on commit 1bc5226

Please sign in to comment.