status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add accessibilityElementsHidden prop 

Summary:
Allow iOS to have similar accessibility functionality to Android. This PR exposes the `accessibilityElementsHidden` property on iOS which is similar to Android's `importantForAccessibility="no-hide-descendants"`

I didn't see any existing examples for testing native props being passed through, but I did add an example to the RNTester app. I've attached some screenshots using the Accessibility Inspector to verify the property was correctly passed through.

![a](https://user-images.githubusercontent.com/603528/34998153-50e66776-faac-11e7-826d-1445a6813929.png)
![b](https://user-images.githubusercontent.com/603528/34998158-535a7420-faac-11e7-80d4-992fb7cd82dd.png)

I've updated the website with appropriate documentation.

https://github.com/facebook/react-native-website/pull/141

![screen shot 2018-01-16 at 10 23 50](https://user-images.githubusercontent.com/603528/34998202-6f2f39a6-faac-11e7-8651-0cfe8e037a30.png)
![screen shot 2018-01-16 at 10 23 59](https://user-images.githubusercontent.com/603528/34998205-711d6f94-faac-11e7-974d-54340c72fce4.png)

[IOS] [FEATURE] [View] - Added accessibilityElementsHidden property
Closes https://github.com/facebook/react-native/pull/17627

Differential Revision: D6806444

Pulled By: hramos

fbshipit-source-id: 50d31fdb92f4c59ae9355b019c422418b2e6cc24
This commit is contained in:
Adam Putinski 2018-01-29 14:20:06 -08:00 committed by Facebook Github Bot
parent d676746f14
commit 31288161e1
3 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,6 +55,7 @@ export type ViewProps = {
importantForAccessibility?: 'auto'| 'yes'| 'no'| 'no-hide-descendants',
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
accessibilityViewIsModal?: bool,
accessibilityElementsHidden?: bool,
onAccessibilityAction?: Function,
onAccessibilityTap?: Function,
onMagicTap?: Function,
@ -173,6 +174,16 @@ module.exports = {
* See http://facebook.github.io/react-native/docs/view.html#accessibilityviewismodal
*/
accessibilityViewIsModal: PropTypes.bool,
/**
* A value indicating whether the accessibility elements contained within
* this accessibility element are hidden.
*
* @platform ios
*
* See http://facebook.github.io/react-native/docs/view.html#accessibilityElementsHidden
*/
accessibilityElementsHidden: PropTypes.bool,
/**
* When `accessible` is true, the system will try to invoke this function

3
RNTester/js/AccessibilityIOSExample.js
View File

@ -55,6 +55,9 @@ class AccessibilityIOSExample extends React.Component<{}> {
accessible={true}>
This text component's accessibilityLabel is set explicitly.
</Text>
<View accessibilityElementsHidden={true}>
<Text>This view's children are hidden from the accessibility tree</Text>
</View>
</View>
);
}

1
React/Views/RCTViewManager.m
View File

@ -113,6 +113,7 @@ RCT_REMAP_VIEW_PROPERTY(accessibilityActions, reactAccessibilityElement.accessib
RCT_REMAP_VIEW_PROPERTY(accessibilityLabel, reactAccessibilityElement.accessibilityLabel, 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(onAccessibilityAction, reactAccessibilityElement.onAccessibilityAction, RCTDirectEventBlock)
RCT_REMAP_VIEW_PROPERTY(onAccessibilityTap, reactAccessibilityElement.onAccessibilityTap, RCTDirectEventBlock)
RCT_REMAP_VIEW_PROPERTY(onMagicTap, reactAccessibilityElement.onMagicTap, RCTDirectEventBlock)