From 31288161e188723456fdb336c494f3c8a3f5b0a8 Mon Sep 17 00:00:00 2001 From: Adam Putinski Date: Mon, 29 Jan 2018 14:20:06 -0800 Subject: [PATCH] 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 --- Libraries/Components/View/ViewPropTypes.js | 11 +++++++++++ RNTester/js/AccessibilityIOSExample.js | 3 +++ React/Views/RCTViewManager.m | 1 + 3 files changed, 15 insertions(+) diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 5c639dfdeffe45..20efa0c46765f4 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -55,6 +55,7 @@ export type ViewProps = { importantForAccessibility?: 'auto'| 'yes'| 'no'| 'no-hide-descendants', accessibilityTraits?: AccessibilityTrait | Array, 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 diff --git a/RNTester/js/AccessibilityIOSExample.js b/RNTester/js/AccessibilityIOSExample.js index 29c8b16f062184..30aef0df31eaaa 100644 --- a/RNTester/js/AccessibilityIOSExample.js +++ b/RNTester/js/AccessibilityIOSExample.js @@ -55,6 +55,9 @@ class AccessibilityIOSExample extends React.Component<{}> { accessible={true}> This text component's accessibilityLabel is set explicitly. + + This view's children are hidden from the accessibility tree + ); } diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index 56415d6226bd2d..06035516fa2914 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -113,6 +113,7 @@ - (RCTShadowView *)shadowView 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)