Skip to content

Commit 50e4001

Browse files
Ziqi Chenfacebook-github-bot
Ziqi Chen
authored andcommittedJul 26, 2018
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
1 parent 2472c8e commit 50e4001

File tree

2 files changed

+14
-0
lines changed

2 files changed

+14
-0
lines changed
 

‎Libraries/Components/Touchable/TouchableWithoutFeedback.js

+10
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@ const warning = require('fbjs/lib/warning');
2222

2323
const {
2424
AccessibilityComponentTypes,
25+
AccessibilityRoles,
26+
AccessibilityStates,
2527
AccessibilityTraits,
2628
} = require('ViewAccessibility');
2729

2830
import type {PressEvent} from 'CoreEventTypes';
2931
import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
3032
import type {
3133
AccessibilityComponentType,
34+
AccessibilityRole,
35+
AccessibilityState,
3236
AccessibilityTraits as AccessibilityTraitsFlow,
3337
} from 'ViewAccessibility';
3438

@@ -44,6 +48,8 @@ export type Props = $ReadOnly<{|
4448
| Array<any>
4549
| any,
4650
accessibilityHint?: string,
51+
accessibilityRole?: ?AccessibilityRole,
52+
accessibilityStates?: ?Array<AccessibilityState>,
4753
accessibilityTraits?: ?AccessibilityTraitsFlow,
4854
children?: ?React.Node,
4955
delayLongPress?: ?number,
@@ -78,6 +84,10 @@ const TouchableWithoutFeedback = ((createReactClass({
7884
accessibilityLabel: PropTypes.node,
7985
accessibilityHint: PropTypes.string,
8086
accessibilityComponentType: PropTypes.oneOf(AccessibilityComponentTypes),
87+
accessibilityRole: PropTypes.oneOf(AccessibilityRoles),
88+
accessibilityStates: PropTypes.arrayOf(
89+
PropTypes.oneOf(AccessibilityStates),
90+
),
8191
accessibilityTraits: PropTypes.oneOfType([
8292
PropTypes.oneOf(AccessibilityTraits),
8393
PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)),

‎Libraries/Text/TextProps.js

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
'use strict';
1212

13+
import type {AccessibilityRole} from 'ViewAccessibility';
14+
import type {AccessibilityState} from 'ViewAccessibility';
1315
import type {AccessibilityTrait} from 'ViewAccessibility';
1416

1517
import type {Node} from 'react';
@@ -29,6 +31,8 @@ export type PressRetentionOffset = $ReadOnly<{|
2931
*/
3032
export type TextProps = $ReadOnly<{
3133
accessible?: ?boolean,
34+
accessibilityRole?: AccessibilityRole,
35+
accessibilityStates?: Array<AccessibilityState>,
3236
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
3337
allowFontScaling?: ?boolean,
3438
children?: Node,

0 commit comments

Comments
 (0)