[0.80-stable] Cherry-pick: Add UIA HeadingLevel behaviour for Fabric architecture (#15207) #15252
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR cherry-picks the changes from PR #15207 to the 0.80-stable branch, adding UIA HeadingLevel behavior for the Fabric architecture.
Overview
This change implements proper support for the UIA (UI Automation) HeadingLevel property in React Native Windows Fabric architecture. This is particularly useful for screen readers and accessibility tools to identify and navigate heading structures in applications.
What's Changed
Core Implementation
GetHeadingLevel()
function inUiaHelpers.cpp
that maps React Native accessibility levels (1-9) to UIA HeadingLevel constants (HeadingLevel1-HeadingLevel9)CompositionDynamicAutomationProvider.cpp
to expose the HeadingLevel property whenUIA_HeadingLevelPropertyId
is requested by UIA clientsCode Organization
GetControlTypeFromString()
andGetControlTypeFromRole()
functions fromCompositionDynamicAutomationProvider.cpp
toUiaHelpers.cpp
for better code organization and reusabilityUiaHelpers.h
Testing & Examples
AccessibilityExampleWindows.tsx
test examples to demonstrate heading role usage withrole="heading"
andaccessibilityRole="header"
RNTesterApp-Fabric.cpp
to capture and verify HeadingLevel propertyHow It Works
When a React Native component has:
The component will now properly expose
HeadingLevel2
to Windows UI Automation clients, enabling screen readers like Narrator to correctly identify and announce heading levels.Benefits
Testing
All existing tests pass with updated snapshots that verify the HeadingLevel property is correctly exposed in the automation tree.
Original PR: #15207
Resolves: microsoft/react-native-gallery#699
Cherry-pick Status: ✅ No conflicts, successfully applied to 0.80-stable
Original prompt
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.
Microsoft Reviewers: Open in CodeFlow