[ Fabric ] Added ariaHidden accessibility prop across all components #14836

iamAbhi-916 · 2025-07-03T10:17:22Z

Description

All three properties (importantForAccessibility, ariaHidden, accessibilityElementsHidden) are properly unified to use the same underlying mechanism.

The behavior matches the expected accessibility standards where elements marked with any of these properties are hidden from assistive technologies along with their descendants ( childeren).

Type of Change

New feature (non-breaking change which adds functionality)

Why

What is the motivation for this change? Add a few sentences describing the context and overall goals of the pull request's commits.
(importantForAccessibility, ariaHidden, accessibilityElementsHidden) are properly unified to use the same underlying mechanism of hiding elements from assistive technologies along with their descendants ( children ).

Resolves [Add Relevant Issue Here]
#14541

What

Any of the three properties being true results in importantForAccessibility: 'no-hide-descendants'
means parent has no-hide-descendants -> IsHiddenByParent helper function correctly walks up the parent chain
Both UIA_IsContentElementPropertyId and UIA_IsControlElementPropertyId return VARIANT_FALSE when hidden
then elements are properly hidden from screen readers

Screenshots

<View accessible={false} aria-label='yellowv'>
          <Text aria-label="yellow1">
            This text is STILL accessible to screen readers (accessible=false)
          </Text>
          <Button title="This button is STILL accessible" />
        </View>
        <View aria-hidden={true}>
          <Text aria-label="yellow2">
            This text should be HIDDEN from screen readers (aria-hidden=true)
          </Text>
          <Button title="This button should also be HIDDEN" />
        </View>
        <View importantForAccessibility={'no-hide-descendants'}>
          <Text accessibilityLabel="yellow3">
            This text should also be HIDDEN (importantForAccessibility)
          </Text>
          <Button title="This button should also be HIDDEN2" />
        </View>

ariahidden.mp4

Testing

tested using playground and accessibility insights
cant be tested in rntester as UIA tree for aria-hidden props would be hidden so cant compare testid

Changelog

yes

Add a brief summary of the change to use in the release notes for the next release.
Added support for (ariaHidden , importantForAccessibility, accessibilityElementsHidden) to have unified underlying behaviour acrross all components.

…essibility and accessibilityElementsHidden as ( android and ios )

vnext/src-win/Libraries/Components/View/View.windows.js

vnext/src-win/Libraries/Components/View/ViewPropTypes.windows.js

acoates-ms · 2025-07-03T16:38:47Z

vnext/src-win/Libraries/Components/View/View.windows.js

@@ -333,7 +330,7 @@ const View: component(
                // [Windows
                accessible={_accessible}
                children={
-                  importantForAccessibility === 'no-hide-descendants'
+                  computedImportantForAccessibility === 'no-hide-descendants'


This conditional rendering of the children using childrenWithImportantForAccessibility was a compromise to implement this property in paper since there was no good way to configure the Xaml automation peers to do what we needed. With fabric we have complete control over the automation providers we should be able to avoid using this forked code when running in fabric. I'd really like us to render children as normal when running fabric as this code has caused issues in apps.

That makes sense, I actually thought of removing it but wanted to make sure this doesn't affect the current behaviour for fabric and paper . Now I have removed the conditional rendering of the children using childrenWithImportantForAccessibility for fabric and for paper It remains the same.

on line 280 : children={otherProps.children} this is part of actual view which is used for fabric.

Ah so to confirm this section of code on line 331 only runs on Paper apps?

…ildren : childrenWithImportantForAccessibility

This reverts commit c81f273.

anupriya13 · 2025-07-07T05:47:22Z

Please keep the PR draft until all CI tests pass.

…tive-windows into aria-hidden

…be hidden in dump tree

Copilot

Pull Request Overview

This PR unifies the hiding behavior for importantForAccessibility, ariaHidden, and accessibilityElementsHidden across Windows views by:

Exposing importantForAccessibility as a valid native prop
Computing a single computedImportantForAccessibility flag in View.windows.js
Having the UI Automation provider honor hide flags on the element and its ancestors

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
vnext/src-win/Libraries/NativeComponent/BaseViewConfig.windows.js	Added `importantForAccessibility` to the list of forwarded view props
vnext/src-win/Libraries/Components/View/View.windows.js	Introduced `computedImportantForAccessibility`, refactored prop and children logic
vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp	Added `IsHiddenByParent` helper and applied it in UIA property getters
packages/e2e-test-app-fabric/test/snapshots/ViewComponentTest.test.ts.snap	Updated snapshot to reflect hidden children in `ViewComponentView`
packages/@react-native-windows/tester/src/js/examples/Image/ImageExample.windows.js	Removed hard-coded `importantForAccessibility` from example
change/react-native-windows-*.json	Added change entry for unified ariaHidden behavior

Comments suppressed due to low confidence (1)

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp:542

Ensure strongView is declared and refers to the current ComponentView (or use m_view) in this scope; otherwise, this identifier will be undefined when calling IsHiddenByParent.

          IsHiddenByParent(strongView);

vnext/src-win/Libraries/NativeComponent/BaseViewConfig.windows.js

Copilot · 2025-07-09T08:22:20Z

vnext/src-win/Libraries/Components/View/View.windows.js

-            ? childrenWithImportantForAccessibility(otherProps.children)
-            : otherProps.children
-        }
+        children={otherProps.children}


The non-Fabric branch now always passes raw children, dropping the previous childrenWithImportantForAccessibility wrapping. Update this to wrap based on computedImportantForAccessibility so descendants are properly hidden.

Suggested change

children={otherProps.children}

children={

computedImportantForAccessibility === 'no-hide-descendants'

? childrenWithImportantForAccessibility(otherProps.children)

: otherProps.children

}

vineethkuttan

The Changes looks good. Also we removed the conditional rendering for Fabric,that Andrew mentioned.

chiaramooney · 2025-07-09T22:15:16Z

packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap

        "_Props": {},
+        "__Children": [


Which test is this connected to and why is it changing? I don't see any View tests being altered.

Also could we add some tests to this PR so we have automated validation of this behavior?

react-native-windows/packages/@react-native-windows/tester/src/js/examples/View/ViewExample.windows.js

Lines 596 to 600 in 02593fb

<View importantForAccessibility="no-hide-descendants">

<RNTesterText>

This element should be hidden from accessibility.

</RNTesterText>

</View>

Previously, we used to set accessibility to false , if importantForAccessibility="no-hide-descendants", in JS side.

But now changes , have been removed from JS. That's why it view component is displayed here.

Correct me if I am wrong @iamAbhi-916

yes @vineethkuttan thats right

chiaramooney

Overall looks good. Just left a few comments. TLDR: can you add some automated tests to validate this behavior?

iamAbhi-916 added 3 commits July 3, 2025 15:12

handled ariaHidden for windows with same behaviour as importantForAcc…

bbc6a28

…essibility and accessibilityElementsHidden as ( android and ios )

Change files

5a97d62

yarn lint:fix and format

2d58734

iamAbhi-916 requested a review from a team as a code owner July 3, 2025 10:17

iamAbhi-916 self-assigned this Jul 3, 2025

iamAbhi-916 added 3 commits July 3, 2025 16:21

updated e2e tests for aria-hidden scenarios

0269cb9

updated snapshots for new test added for aria-hidden prop

c81f273

lint fix , wrapped aria-hidden in viewProps

1fd071a

acoates-ms reviewed Jul 3, 2025

View reviewed changes

vnext/src-win/Libraries/Components/View/View.windows.js Outdated Show resolved Hide resolved

acoates-ms reviewed Jul 3, 2025

View reviewed changes

vnext/src-win/Libraries/Components/View/ViewPropTypes.windows.js Outdated Show resolved Hide resolved

acoates-ms reviewed Jul 3, 2025

View reviewed changes

removed js side hacky patch in fabric for handling aria-hidden for ch…

23d1273

…ildren : childrenWithImportantForAccessibility

iamAbhi-916 requested a review from acoates-ms July 4, 2025 06:30

iamAbhi-916 added 4 commits July 4, 2025 12:07

yarn lint:fix and yarn format

3e9452c

revert e2e tests for aria-hidden prop

ccffc59

Revert "updated snapshots for new test added for aria-hidden prop"

f70d95e

This reverts commit c81f273.

Merge branch 'main' into aria-hidden

05db8b1

iamAbhi-916 marked this pull request as draft July 7, 2025 06:00

iamAbhi-916 added 3 commits July 7, 2025 11:31

updated snapshots for fabric

7c27808

Merge branch 'aria-hidden' of https://github.com/iamAbhi-916/react-na…

da88831

…tive-windows into aria-hidden

updated image tests removing aria hidden which caused the test id to …

bed95e3

…be hidden in dump tree

iamAbhi-916 marked this pull request as ready for review July 9, 2025 08:02

vineethkuttan requested a review from Copilot July 9, 2025 08:20

Copilot AI reviewed Jul 9, 2025

View reviewed changes

vineethkuttan approved these changes Jul 9, 2025

View reviewed changes

chiaramooney reviewed Jul 9, 2025

View reviewed changes

iamAbhi-916 merged commit 5cc75ae into microsoft:main Jul 10, 2025
58 checks passed

iamAbhi-916 deleted the aria-hidden branch July 10, 2025 08:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ Fabric ] Added ariaHidden accessibility prop across all components #14836

[ Fabric ] Added ariaHidden accessibility prop across all components #14836

Uh oh!

iamAbhi-916 commented Jul 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

acoates-ms Jul 3, 2025

Uh oh!

iamAbhi-916 Jul 4, 2025

Uh oh!

iamAbhi-916 Jul 4, 2025

Uh oh!

chiaramooney Jul 9, 2025

Uh oh!

anupriya13 commented Jul 7, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Jul 9, 2025

Uh oh!

vineethkuttan left a comment

Uh oh!

chiaramooney Jul 9, 2025

Uh oh!

vineethkuttan Jul 10, 2025 •

edited

Loading

Uh oh!

iamAbhi-916 Jul 10, 2025

Uh oh!

chiaramooney left a comment

Uh oh!

Uh oh!

Uh oh!

	<View importantForAccessibility="no-hide-descendants">
	<RNTesterText>
	This element should be hidden from accessibility.
	</RNTesterText>
	</View>

[ Fabric ] Added ariaHidden accessibility prop across all components #14836

[ Fabric ] Added ariaHidden accessibility prop across all components #14836

Uh oh!

Conversation

iamAbhi-916 commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Testing

Changelog

Uh oh!

Uh oh!

Uh oh!

acoates-ms Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

iamAbhi-916 Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

iamAbhi-916 Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

chiaramooney Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

anupriya13 commented Jul 7, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

vineethkuttan left a comment

Choose a reason for hiding this comment

Uh oh!

chiaramooney Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

vineethkuttan Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

iamAbhi-916 Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

chiaramooney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

iamAbhi-916 commented Jul 3, 2025 •

edited

Loading

vineethkuttan Jul 10, 2025 •

edited

Loading