Skip to content

Commit

Permalink
Add accessibilityElementsHidden prop
Browse files Browse the repository at this point in the history
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.

facebook/react-native-website#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 #17627

Differential Revision: D6806444

Pulled By: hramos

fbshipit-source-id: 50d31fdb92f4c59ae9355b019c422418b2e6cc24
  • Loading branch information
aputinski authored and facebook-github-bot committed Jan 29, 2018
1 parent d676746 commit 3128816
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 0 deletions.
11 changes: 11 additions & 0 deletions Libraries/Components/View/ViewPropTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions RNTester/js/AccessibilityIOSExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 3128816

Please sign in to comment.