From fc91e28f1dde72d90b6271e2aa50ab7e50937a37 Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Wed, 31 Aug 2022 22:42:47 -0300
Subject: [PATCH] feat: Add aria-hidden prop to View component

---
 Libraries/Components/View/View.js             | 19 ++++++++++++++++++-
 Libraries/Components/View/ViewPropTypes.js    |  8 ++++++++
 .../Accessibility/AccessibilityExample.js     |  8 ++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
index 20b6f90fecb2e7..10a839762d2171 100644
--- 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
index effed17622cfda..47915c5c5f4e01 100644
--- 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
index 1db5bc2249f662..cc227872250c72 100644
--- 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">