kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-06 22:37:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

- remove accessibilityComponentType and accessibilityTraits props (a11y) (#24344)

Browse Source 
Summary:
Closes: https://github.com/facebook/react-native/issues/24016

React Native 0.57 introduced cross-platform `accessibilityRole` and `accessibilityStates` props in order to replace `accessibilityComponentType` (for android) and `accessibilityTraits` (for iOS). With #24095 `accessibilityRole` and `accessibilityStates` will increase, receiving more options, which seems to be a good moment to remove deprecated props.

Remove deprecated `accessibilityComponentType` and `accessibilityTraits` props.

[General] [Removed] - Remove accessibilityComponentType and accessibilityTraits props
Pull Request resolved: https://github.com/facebook/react-native/pull/24344

Reviewed By: rickhanlonii

Differential Revision: D14842214

Pulled By: cpojer

fbshipit-source-id: 279945e503d8a23bfee7a49d42f5db490c5f6069
This commit is contained in:
Estevão Lucas
2019-04-15 10:42:02 -07:00
committed by Facebook Github Bot
parent 57c1a7add2
commit f70e58f355
11 changed files with 4 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Libraries/Components/Touchable/TouchableWithoutFeedback.js
View File

@@ -20,20 +20,13 @@ const createReactClass = require('create-react-class');
const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
const {
DeprecatedAccessibilityComponentTypes,
DeprecatedAccessibilityRoles,
DeprecatedAccessibilityStates,
DeprecatedAccessibilityTraits,
} = require('DeprecatedViewAccessibility');
import type {SyntheticEvent, LayoutEvent, PressEvent} from 'CoreEventTypes';
import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
import type {
AccessibilityComponentType,
AccessibilityRole,
AccessibilityStates,
AccessibilityTraits,
} from 'ViewAccessibility';
import type {AccessibilityRole, AccessibilityStates} from 'ViewAccessibility';
type TargetEvent = SyntheticEvent<
$ReadOnly<{|
@@ -47,13 +40,11 @@ type FocusEvent = TargetEvent;
const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
const OVERRIDE_PROPS = [
'accessibilityComponentType',
'accessibilityLabel',
'accessibilityHint',
'accessibilityIgnoresInvertColors',
'accessibilityRole',
'accessibilityStates',
'accessibilityTraits',
'hitSlop',
'nativeID',
'onBlur',
@@ -64,13 +55,11 @@ const OVERRIDE_PROPS = [
export type Props = $ReadOnly<{|
accessible?: ?boolean,
accessibilityComponentType?: ?AccessibilityComponentType,
accessibilityLabel?: ?Stringish,
accessibilityHint?: ?Stringish,
accessibilityIgnoresInvertColors?: ?boolean,
accessibilityRole?: ?AccessibilityRole,
accessibilityStates?: ?AccessibilityStates,
accessibilityTraits?: ?AccessibilityTraits,
children?: ?React.Node,
delayLongPress?: ?number,
delayPressIn?: ?number,
@@ -105,18 +94,11 @@ const TouchableWithoutFeedback = ((createReactClass({
accessible: PropTypes.bool,
accessibilityLabel: PropTypes.node,
accessibilityHint: PropTypes.string,
accessibilityComponentType: PropTypes.oneOf(
DeprecatedAccessibilityComponentTypes,
),
accessibilityIgnoresInvertColors: PropTypes.bool,
accessibilityRole: PropTypes.oneOf(DeprecatedAccessibilityRoles),
accessibilityStates: PropTypes.arrayOf(
PropTypes.oneOf(DeprecatedAccessibilityStates),
),
accessibilityTraits: PropTypes.oneOfType([
PropTypes.oneOf(DeprecatedAccessibilityTraits),
PropTypes.arrayOf(PropTypes.oneOf(DeprecatedAccessibilityTraits)),
]),
/**
* When `accessible` is true (which is the default) this may be called when
* the OS-specific concept of "focus" occurs. Some platforms may not have

2
Libraries/Components/View/ReactNativeViewAttributes.js
View File

@@ -19,11 +19,9 @@ ReactNativeViewAttributes.UIView = {
accessible: true,
accessibilityActions: true,
accessibilityLabel: true,
accessibilityComponentType: true,
accessibilityLiveRegion: true,
accessibilityRole: true,
accessibilityStates: true,
accessibilityTraits: true,
accessibilityHint: true,
importantForAccessibility: true,
nativeID: true,

29
Libraries/Components/View/ViewAccessibility.js
View File

@@ -10,35 +10,6 @@
'use strict';
export type AccessibilityTrait =
| 'none'
| 'button'
| 'link'
| 'header'
| 'search'
| 'image'
| 'selected'
| 'plays'
| 'key'
| 'text'
| 'summary'
| 'disabled'
| 'frequentUpdates'
| 'startsMedia'
| 'adjustable'
| 'allowsDirectInteraction'
| 'pageTurn';
export type AccessibilityTraits =
| AccessibilityTrait
| $ReadOnlyArray<AccessibilityTrait>;
export type AccessibilityComponentType =
| 'none'
| 'button'
| 'radiobutton_checked'
| 'radiobutton_unchecked';
// This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
export type AccessibilityRole =
| 'none'

32
Libraries/Components/View/ViewPropTypes.js
View File

@@ -15,12 +15,7 @@ import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
import type React from 'React';
import type {ViewStyleProp} from 'StyleSheet';
import type {TVViewProps} from 'TVViewPropTypes';
import type {
AccessibilityComponentType,
AccessibilityTrait,
AccessibilityRole,
AccessibilityStates,
} from 'ViewAccessibility';
import type {AccessibilityRole, AccessibilityStates} from 'ViewAccessibility';
export type ViewLayout = Layout;
export type ViewLayoutEvent = LayoutEvent;
@@ -254,16 +249,6 @@ type AndroidViewProps = $ReadOnly<{|
*/
needsOffscreenAlphaCompositing?: ?boolean,
/**
* Indicates to accessibility services to treat UI component like a
* native one. Works for Android only.
*
* @platform android
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilitycomponenttype
*/
accessibilityComponentType?: ?AccessibilityComponentType,
/**
* Indicates to accessibility services whether the user should be notified
* when this view changes. Works for Android API >= 19 only.
@@ -336,21 +321,6 @@ type IOSViewProps = $ReadOnly<{|
*/
accessibilityIgnoresInvertColors?: ?boolean,
/**
* Provides additional traits to screen reader. By default no traits are
* provided unless specified otherwise in element.
*
* You can provide one trait or an array of many traits.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilitytraits
*/
accessibilityTraits?: ?(
| AccessibilityTrait
| $ReadOnlyArray<AccessibilityTrait>
),
/**
* A value indicating whether VoiceOver should ignore the elements
* within views that are siblings of the receiver.

25
Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js
View File

@@ -11,31 +11,6 @@
'use strict';
module.exports = {
DeprecatedAccessibilityTraits: [
'none',
'button',
'link',
'header',
'search',
'image',
'selected',
'plays',
'key',
'text',
'summary',
'disabled',
'frequentUpdates',
'startsMedia',
'adjustable',
'allowsDirectInteraction',
'pageTurn',
],
DeprecatedAccessibilityComponentTypes: [
'none',
'button',
'radiobutton_checked',
'radiobutton_unchecked',
],
// This must be kept in sync with the AccessibilityRolesMask in RCTViewManager.m
DeprecatedAccessibilityRoles: [
'none',

29
Libraries/DeprecatedPropTypes/DeprecatedViewPropTypes.js
View File

@@ -17,8 +17,6 @@ const DeprecatedStyleSheetPropType = require('DeprecatedStyleSheetPropType');
const DeprecatedViewStylePropTypes = require('DeprecatedViewStylePropTypes');
const {
DeprecatedAccessibilityComponentTypes,
DeprecatedAccessibilityTraits,
DeprecatedAccessibilityRoles,
DeprecatedAccessibilityStates,
} = require('DeprecatedViewAccessibility');
@@ -69,18 +67,6 @@ module.exports = {
*/
accessibilityIgnoresInvertColors: PropTypes.bool,
/**
* Indicates to accessibility services to treat UI component like a
* native one. Works for Android only.
*
* @platform android
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilitycomponenttype
*/
accessibilityComponentType: PropTypes.oneOf(
DeprecatedAccessibilityComponentTypes,
),
/**
* Indicates to accessibility services to treat UI component like a specific role.
*/
@@ -118,21 +104,6 @@ module.exports = {
'no-hide-descendants',
]),
/**
* Provides additional traits to screen reader. By default no traits are
* provided unless specified otherwise in element.
*
* You can provide one trait or an array of many traits.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilitytraits
*/
accessibilityTraits: PropTypes.oneOfType([
PropTypes.oneOf(DeprecatedAccessibilityTraits),
PropTypes.arrayOf(PropTypes.oneOf(DeprecatedAccessibilityTraits)),
]),
/**
* A value indicating whether VoiceOver should ignore the elements
* within views that are siblings of the receiver.

7
Libraries/Text/TextProps.js
View File

@@ -13,11 +13,7 @@
import type {LayoutEvent, PressEvent, TextLayoutEvent} from 'CoreEventTypes';
import type React from 'React';
import type {TextStyleProp} from 'StyleSheet';
import type {
AccessibilityRole,
AccessibilityStates,
AccessibilityTrait,
} from 'ViewAccessibility';
import type {AccessibilityRole, AccessibilityStates} from 'ViewAccessibility';
export type PressRetentionOffset = $ReadOnly<{|
top: number,
@@ -40,7 +36,6 @@ export type TextProps = $ReadOnly<{|
accessibilityLabel?: ?Stringish,
accessibilityRole?: ?AccessibilityRole,
accessibilityStates?: ?AccessibilityStates,
accessibilityTraits?: ?(AccessibilityTrait | Array<AccessibilityTrait>),
/**
* Whether font should be scaled down automatically.

11
React/Views/RCTViewManager.m
View File

@@ -110,7 +110,6 @@ RCT_REMAP_VIEW_PROPERTY(accessible, reactAccessibilityElement.isAccessibilityEle
RCT_REMAP_VIEW_PROPERTY(accessibilityActions, reactAccessibilityElement.accessibilityActions, NSArray<NSString *>)
RCT_REMAP_VIEW_PROPERTY(accessibilityLabel, reactAccessibilityElement.accessibilityLabel, NSString)
RCT_REMAP_VIEW_PROPERTY(accessibilityHint, reactAccessibilityElement.accessibilityHint, NSString)
RCT_REMAP_VIEW_PROPERTY(accessibilityTraits, reactAccessibilityElement.accessibilityTraits, UIAccessibilityTraits)
RCT_REMAP_VIEW_PROPERTY(accessibilityViewIsModal, reactAccessibilityElement.accessibilityViewIsModal, BOOL)
RCT_REMAP_VIEW_PROPERTY(accessibilityElementsHidden, reactAccessibilityElement.accessibilityElementsHidden, BOOL)
RCT_REMAP_VIEW_PROPERTY(accessibilityIgnoresInvertColors, reactAccessibilityElement.shouldAccessibilityIgnoresInvertColors, BOOL)
@@ -159,16 +158,6 @@ RCT_CUSTOM_VIEW_PROPERTY(accessibilityRole, UIAccessibilityTraits, RCTView)
view.reactAccessibilityElement.accessibilityTraits = (view.reactAccessibilityElement.accessibilityTraits & ~AccessibilityRolesMask) | maskedTraits;
}
RCT_CUSTOM_VIEW_PROPERTY(accessibilityStates, UIAccessibilityTraits, RCTView)
{
// This mask must be kept in sync with the AccessibilityStates enum defined in ViewAccessibility.js and DeprecatedViewAccessibility.js
const UIAccessibilityTraits AccessibilityStatesMask = UIAccessibilityTraitNotEnabled | UIAccessibilityTraitSelected;
UIAccessibilityTraits newTraits = json ? [RCTConvert UIAccessibilityTraits:json] : defaultView.accessibilityTraits;
UIAccessibilityTraits maskedTraits = newTraits & AccessibilityStatesMask;
view.reactAccessibilityElement.accessibilityTraits = (view.reactAccessibilityElement.accessibilityTraits & ~AccessibilityStatesMask) | maskedTraits;
}
RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSString *, RCTView)
{
view.nativeID = json ? [RCTConvert NSString:json] : defaultView.nativeID;

101
ReactAndroid/src/main/java/com/facebook/react/uimanager/AccessibilityHelper.java
View File

@@ -1,101 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
package com.facebook.react.uimanager;
import android.view.View;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityNodeInfo;
import android.widget.Button;
import android.widget.RadioButton;
/**
* Helper class containing logic for setting accessibility View properties.
*/
/* package */ class AccessibilityHelper {
private static final String BUTTON = "button";
private static final String RADIOBUTTON_CHECKED = "radiobutton_checked";
private static final String RADIOBUTTON_UNCHECKED = "radiobutton_unchecked";
private static final View.AccessibilityDelegate BUTTON_DELEGATE =
new View.AccessibilityDelegate() {
@Override
public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
super.onInitializeAccessibilityEvent(host, event);
event.setClassName(Button.class.getName());
}
@Override
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfo info) {
super.onInitializeAccessibilityNodeInfo(host, info);
info.setClassName(Button.class.getName());
}
};
private static final View.AccessibilityDelegate RADIOBUTTON_CHECKED_DELEGATE =
new View.AccessibilityDelegate() {
@Override
public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
super.onInitializeAccessibilityEvent(host, event);
event.setClassName(RadioButton.class.getName());
event.setChecked(true);
}
@Override
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfo info) {
super.onInitializeAccessibilityNodeInfo(host, info);
info.setClassName(RadioButton.class.getName());
info.setCheckable(true);
info.setChecked(true);
}
};
private static final View.AccessibilityDelegate RADIOBUTTON_UNCHECKED_DELEGATE =
new View.AccessibilityDelegate() {
@Override
public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
super.onInitializeAccessibilityEvent(host, event);
event.setClassName(RadioButton.class.getName());
event.setChecked(false);
}
@Override
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfo info) {
super.onInitializeAccessibilityNodeInfo(host, info);
info.setClassName(RadioButton.class.getName());
info.setCheckable(true);
info.setChecked(false);
}
};
public static void updateAccessibilityComponentType(View view, String componentType) {
if (componentType == null) {
view.setAccessibilityDelegate(null);
return;
}
switch (componentType) {
case BUTTON:
view.setAccessibilityDelegate(BUTTON_DELEGATE);
break;
case RADIOBUTTON_CHECKED:
view.setAccessibilityDelegate(RADIOBUTTON_CHECKED_DELEGATE);
break;
case RADIOBUTTON_UNCHECKED:
view.setAccessibilityDelegate(RADIOBUTTON_UNCHECKED_DELEGATE);
break;
default:
view.setAccessibilityDelegate(null);
break;
}
}
public static void sendAccessibilityEvent(View view, int eventType) {
view.sendAccessibilityEvent(eventType);
}
}

6
ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
View File

@@ -32,7 +32,6 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
private static final String PROP_Z_INDEX = "zIndex";
private static final String PROP_RENDER_TO_HARDWARE_TEXTURE = "renderToHardwareTextureAndroid";
private static final String PROP_ACCESSIBILITY_LABEL = "accessibilityLabel";
private static final String PROP_ACCESSIBILITY_COMPONENT_TYPE = "accessibilityComponentType";
private static final String PROP_ACCESSIBILITY_HINT = "accessibilityHint";
private static final String PROP_ACCESSIBILITY_LIVE_REGION = "accessibilityLiveRegion";
private static final String PROP_ACCESSIBILITY_ROLE = "accessibilityRole";
@@ -117,11 +116,6 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
view.setContentDescription(accessibilityLabel);
}
@ReactProp(name = PROP_ACCESSIBILITY_COMPONENT_TYPE)
public void setAccessibilityComponentType(@Nonnull T view, String accessibilityComponentType) {
AccessibilityHelper.updateAccessibilityComponentType(view, accessibilityComponentType);
}
@ReactProp(name = PROP_ACCESSIBILITY_HINT)
public void setAccessibilityHint(@Nonnull T view, String accessibilityHint) {
view.setTag(R.id.accessibility_hint, accessibilityHint);

2
ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java
View File

@@ -842,6 +842,6 @@ public class NativeViewHierarchyManager {
if (view == null) {
throw new JSApplicationIllegalArgumentException("Could not find view with tag " + tag);
}
AccessibilityHelper.sendAccessibilityEvent(view, eventType);
view.sendAccessibilityEvent(eventType);
}
}