feat: Add aria-hidden prop to View component

facebook · Sep 5, 2022 · fc91e28 · fc91e28
1 parent 5c109b3
commit fc91e28
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
@@ -29,7 +29,16 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
   (
-    {tabIndex, focusable, style, pointerEvents, ...otherProps}: ViewProps,
+    {
+      accessibilityElementsHidden,
+      'aria-hidden': ariaHidden,
+      focusable,
+      importantForAccessibility,
+      pointerEvents,
+      style,
+      tabIndex,
+      ...otherProps
+    }: ViewProps,
     forwardedRef,
   ) => {
     const flattendStyle = flattenStyle(style);
@@ -38,6 +47,14 @@ const View: React.AbstractComponent<
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
+          accessibilityElementsHidden={
+            ariaHidden ?? accessibilityElementsHidden
+          }
+          importantForAccessibility={
+            ariaHidden !== undefined
+              ? 'no-hide-descendants'
+              : importantForAccessibility
+          }
           {...otherProps}
           style={style}
           pointerEvents={newPointerEvents}

diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js
@@ -485,6 +485,14 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityLabelledBy?: ?string | ?Array<string>,
 
+  /**
+   * A value indicating whether the accessibility elements contained within
+   * this accessibility element are hidden.
+   *
+   * See https://reactnative.dev/docs/view#aria-hidden
+   */
+  'aria-hidden'?: ?boolean,
+
   /**
    * Views that are only used to layout their children or otherwise don't draw
    * anything may be automatically removed from the native hierarchy as an

diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -126,6 +126,14 @@ class AccessibilityExample extends React.Component<{}> {
           </View>
         </RNTesterBlock>
 
+        <RNTesterBlock title="View with hidden children from accessibility tree.">
+          <View aria-hidden>
+            <Text>
+              This view's children are hidden from the accessibility tree
+            </Text>
+          </View>
+        </RNTesterBlock>
+
         {/* Android screen readers will say the accessibility hint instead of the text
            since the view doesn't have a label. */}
         <RNTesterBlock title="Accessible view with TextViews with hint">