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
This commit is contained in:
parent
2472c8e392
commit
50e400128e
|
@ -22,6 +22,8 @@ const warning = require('fbjs/lib/warning');
|
|||
|
||||
const {
|
||||
AccessibilityComponentTypes,
|
||||
AccessibilityRoles,
|
||||
AccessibilityStates,
|
||||
AccessibilityTraits,
|
||||
} = require('ViewAccessibility');
|
||||
|
||||
|
@ -29,6 +31,8 @@ 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,
|
||||
|
|
Loading…
Reference in New Issue