feat: support aria-hidden prop (#1474)

callstack · Aug 31, 2023 · 238c860 · 238c860
1 parent f0fee35
commit 238c860
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 1 deletion.
diff --git a/src/helpers/__tests__/format-default.tsx b/src/helpers/__tests__/format-default.tsx
@@ -10,6 +10,7 @@ const node: ReactTestRendererJSON = {
 describe('mapPropsForQueryError', () => {
   test('preserves props that are helpful for debugging', () => {
     const props = {
+      'aria-hidden': true,
       accessibilityElementsHidden: true,
       accessibilityViewIsModal: true,
       importantForAccessibility: 'yes',
@@ -25,7 +26,6 @@ describe('mapPropsForQueryError', () => {
     };
 
     const result = defaultMapProps(props, node);
-
     expect(result).toStrictEqual(props);
   });
 

diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts
@@ -62,6 +62,7 @@ function isSubtreeInaccessible(element: ReactTestInstance): boolean {
     return false;
   }
 
+  // See: https://reactnative.dev/docs/accessibility#aria-hidden
   if (element.props['aria-hidden']) {
     return true;
   }

diff --git a/src/helpers/format-default.ts b/src/helpers/format-default.ts
@@ -11,6 +11,7 @@ const propsToDisplay = [
   'accessibilityLabel',
   'accessibilityLabelledBy',
   'accessibilityHint',
+  'aria-hidden',
   'placeholder',
   'value',
   'defaultValue',

diff --git a/src/queries/__tests__/makeQueries.test.tsx b/src/queries/__tests__/makeQueries.test.tsx
@@ -18,6 +18,7 @@ describe('printing element tree', () => {
   test('prints helpful props but not others', async () => {
     const { getByText } = render(
       <View
+        aria-hidden
         accessibilityElementsHidden
         accessibilityViewIsModal
         importantForAccessibility="yes"
@@ -48,6 +49,7 @@ describe('printing element tree', () => {
         accessibilityLabelledBy="LABELLED_BY"
         accessibilityRole="summary"
         accessibilityViewIsModal={true}
+        aria-hidden={true}
         importantForAccessibility="yes"
         nativeID="NATIVE_ID"
         testID="TEST_ID"

diff --git a/website/docs/API.md b/website/docs/API.md
@@ -933,6 +933,7 @@ This covers only part of [ARIA notion of Accessiblity Tree](https://www.w3.org/T
 For the scope of this function, element is inaccessible when it, or any of its ancestors, meets any of the following conditions:
 
 - it has `display: none` style
+- it has [`aria-hidden`](https://reactnative.dev/docs/accessibility#aria-hidden) prop set to `true`
 - it has [`accessibilityElementsHidden`](https://reactnative.dev/docs/accessibility#accessibilityelementshidden-ios) prop set to `true`
 - it has [`importantForAccessibility`](https://reactnative.dev/docs/accessibility#importantforaccessibility-android) prop set to `no-hide-descendants`
 - it has sibling host element with [`accessibilityViewIsModal`](https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios) prop set to `true`