Permalink
Browse files

accessibilityTraits + accessibilityComponentType >> accessibilityRole…

… + accessibilityStates 1/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 wrote a script that focuses on replacing instances of the two properties that only added a single role to `accessibilityTraits` and `accessibilityComponentType`. In summary, this script:
* replaces instances of `accessibilityTraits = "<iOStrait>"` with `accessibilityRole = "<iOStrait>"`
* replaces instances of `accessibilityTraits = {['<iOStrait>']}` with `accessibilityRole = "<iOStrait>"`
* replaces instances of `accessibilityTraits = {"<iOStrait>"}` with `accessibilityRole = "<iOStrait>"`
* removes instances of `accessibilityComponentType`

```

The following is the codeshift script I wrote:
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * format
 */

'use strict';

export default function transformer(file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);

  let hasChanges = false;
  const elements = root.find(j.JSXElement);
  let values;
  let valuess;
  let valuesss;
  elements.forEach(path => {
    const openEl = path.node.openingElement;
    hasChanges = true;
    for (let i = 0; i < openEl.attributes.length; i++) {
		if (openEl.attributes[i].name.name === 'accessibilityComponentType') {
        	openEl.attributes.splice(i, 1);
        }
      if (openEl.attributes[i].name.name === 'accessibilityTraits') {
        if (openEl.attributes[i].value.expression) {
          if (openEl.attributes[i].value.expression.type === 'Literal') {
            values = openEl.attributes[i].value.expression.value;
            openEl.attributes[i] = j.jsxAttribute(
              j.jsxIdentifier('accessibilityRole'),
              j.literal(values),
            );
          }
        }

        if (openEl.attributes[i].value) {
          if (
            openEl.attributes[i].value &&
            openEl.attributes[i].value.type === 'Literal'
          ) {
            valuess = openEl.attributes[i].value.value;
            openEl.attributes[i] = j.jsxAttribute(
              j.jsxIdentifier('accessibilityRole'),
              j.literal(valuess),
            );
          }
        }

        if (openEl.attributes[i].value.expression) {
          if (
            openEl.attributes[i].value.expression.type === 'ArrayExpression' &&
            openEl.attributes[i].value.expression.elements.length === 1
          ) {
            valuesss = openEl.attributes[i].value.expression.elements[0].value;
            openEl.attributes[i] = j.jsxAttribute(
              j.jsxIdentifier('accessibilityRole'),
              j.literal(valuesss),
            );
          }
        }
      }
    }
  });
  if (hasChanges) {
    return root.toSource();
  } else {
    return null;
  }
}
```
I then used this command to run the codemod:

```
./scripts/js1/node_modules/.bin/jscodeshift -c 10 --parser=flow --transform ./scripts/js1/commands/codeshift/add-accessibilityRoles/index.js /data/sandcastle/boxes/instance-ide/xplat/js/RKJSModules/Apps
hg status -n | xargs /data/sandcastle/boxes/instance-ide/tools/third-party/prettier/node_modules/.bin/prettier --single-quote --no-bracket-spacing --jsx-bracket-same-line --trailing-comma all --parser flow --write --require-pragma --no-config
hg status -n | xargs ./scripts/eslint/eslint --plugin lint --no-eslintrc --parser babel-eslint --rule "lint/sort-requires: 1" --fix
js1 build buckfiles
```

Lastly, I had to add a few manual fixes:
* Checked that instances of `accessibilityComponentType` that were deleted were indeed replaced with `accessibilityRole`
* Added props  `accessibilityRole` and `accessibilityStates` to `TouchableWithoutFeedBack` components and `TextProps` because they don't inherit properties directly from view.

Reviewed By: PeteTheHeat

Differential Revision: D8937323

fbshipit-source-id: 85bf4d596e8e7c7ace75ab0b0e68599043760840
  • Loading branch information...
ziqichen6 authored and facebook-github-bot committed Jul 26, 2018
1 parent 2472c8e commit 50e400128eba554af5de4ca267430524e3eff107
Showing with 14 additions and 0 deletions.
  1. +10 −0 Libraries/Components/Touchable/TouchableWithoutFeedback.js
  2. +4 −0 Libraries/Text/TextProps.js
@@ -22,13 +22,17 @@ const warning = require('fbjs/lib/warning');
const {
AccessibilityComponentTypes,
AccessibilityRoles,
AccessibilityStates,
AccessibilityTraits,
} = require('ViewAccessibility');
import type {PressEvent} from 'CoreEventTypes';
import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
import type {
AccessibilityComponentType,
AccessibilityRole,
AccessibilityState,
AccessibilityTraits as AccessibilityTraitsFlow,
} from 'ViewAccessibility';
@@ -44,6 +48,8 @@ export type Props = $ReadOnly<{|
| Array<any>
| any,
accessibilityHint?: string,
accessibilityRole?: ?AccessibilityRole,
accessibilityStates?: ?Array<AccessibilityState>,
accessibilityTraits?: ?AccessibilityTraitsFlow,
children?: ?React.Node,
delayLongPress?: ?number,
@@ -78,6 +84,10 @@ const TouchableWithoutFeedback = ((createReactClass({
accessibilityLabel: PropTypes.node,
accessibilityHint: PropTypes.string,
accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentTypes),
accessibilityRole: PropTypes.oneOf(AccessibilityRoles),
accessibilityStates: PropTypes.arrayOf(
PropTypes.oneOf(AccessibilityStates),
),
accessibilityTraits: PropTypes.oneOfType([
PropTypes.oneOf(AccessibilityTraits),
PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)),
@@ -10,6 +10,8 @@
'use strict';
import type {AccessibilityRole} from 'ViewAccessibility';
import type {AccessibilityState} from 'ViewAccessibility';
import type {AccessibilityTrait} from 'ViewAccessibility';
import type {Node} from 'react';
@@ -29,6 +31,8 @@ export type PressRetentionOffset = $ReadOnly<{|
*/
export type TextProps = $ReadOnly<{
accessible?: ?boolean,
accessibilityRole?: AccessibilityRole,
accessibilityStates?: Array<AccessibilityState>,
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
allowFontScaling?: ?boolean,
children?: Node,

0 comments on commit 50e4001

Please sign in to comment.