Repository navigation
Native ARIA Roles: iOS Paper + Fabric - #37309
Closed
NickGerleman wants to merge 1 commit into
Closed
NickGerleman wants to merge 1 commit into
NickGerleman wants to merge 1 commit into
Conversation
facebook-github-bot
added
CLA Signed
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
Base commit: d54f486 |
NickGerleman
force-pushed
the
export-D45432530
branch
from
May 8, 2023 16:19
6b0223f to
7044bd2
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
1 similar comment
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
NickGerleman
force-pushed
the
export-D45432530
branch
from
May 8, 2023 16:28
7044bd2 to
8ee5993
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
NickGerleman
force-pushed
the
export-D45432530
branch
from
May 8, 2023 22:11
8ee5993 to
bf5b75b
Compare
NickGerleman
force-pushed
the
export-D45432530
branch
from
May 12, 2023 14:19
bf5b75b to
382f08a
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
NickGerleman
force-pushed
the
export-D45432530
branch
from
May 13, 2023 16:07
382f08a to
32eac0d
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
1 similar comment
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
NickGerleman
force-pushed
the
export-D45432530
branch
from
June 4, 2023 08:51
32eac0d to
f5e5529
Compare
NickGerleman
force-pushed
the
export-D45432530
branch
from
June 4, 2023 09:09
f5e5529 to
dda3eb9
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
NickGerleman
force-pushed
the
export-D45432530
branch
from
June 4, 2023 09:14
dda3eb9 to
65684a8
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
Summary: Pull Request resolved: react#37309 ### Stack ARIA roles in React Native are implemented on top of accessibilityRole. This is lossy because there are many more ARIA roles than accessibilityRole. This is especially true for RN on desktop where accessibilityRole was designed around accessibility APIs only available on mobile. This series of changes aims to change this implementation to instead pass the ARIA role to native, alongside any existing accessibilityRole. This gives the platform more control in exactly how to map an ARIA role to native behavior. As an example, this would allow mapping any ARIA role to AutomationControlType on Windows without needing to fork to add new options to accessibilityRole. It also allows greater implementation flexibility for other platforms down the line, but for now, iOS and Android behave the same as before (though with their implementation living in native). ### Diff This enables the `role` prop in iOS. ARIA role strings become convertible to `UIAccessibilityTrait`, which is the sink of most of the roles. We keep a list of traits derived from `role` vs `accessibilityRole` on the view, then inval and apply the result any time the prop for either is set. Changelog: [Internal] Reviewed By: sammy-SC Differential Revision: D45432530 fbshipit-source-id: 38d516d08b4a987ed9a274c88eb29df6538f76b8
NickGerleman
force-pushed
the
export-D45432530
branch
from
June 4, 2023 09:21
65684a8 to
3f47f18
Compare
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D45432530 |
Contributor
|
This pull request has been merged in 2d07d5f. |
meta-codesync Bot
pushed a commit
that referenced
this pull request
Oct 26, 2026
Summary: Hi, I'm a React Native developer. Thanks for the recent iOS accessibility work. On iOS, `role="slider"` ends up with no accessibility traits, so VoiceOver doesn't treat the view as adjustable. `accessibilityRole="adjustable"` on the same view works. The traits come from `fromString(const std::string &, AccessibilityTraits &)` in `accessibilityPropsConversions.h`, which has an `"adjustable"` case but no `"slider"` case. Before the ARIA roles moved to native in #37309, the JS mapping turned `role: 'slider'` into `accessibilityRole: 'adjustable'`, so this used to work. The native table maps `slider` to no trait instead. This adds `slider` to the `adjustable` case, the same way `img`/`image` and `heading`/`header` share a case. Android doesn't read `accessibilityTraits`, so only iOS changes. It only touches `slider`. The other roles listed in #50123 stay as they are, since the comment above `RCTViewIsInteractiveAccessibilityElement` says some of them carry no trait on purpose. I also left the legacy `RCTViewManager.m` table alone, which maps `slider` to `UIAccessibilityTraitNone` as well. Happy to change that one too if it's still wanted. Part of #50123. ## Changelog: [IOS] [FIXED] - `role="slider"` now gets the adjustable accessibility trait, like `accessibilityRole="adjustable"` Pull Request resolved: #59463 Test Plan: RNTester on an iPhone 18 Pro simulator (iOS 27.0), with the Playground rendering: ```tsx <View accessible role="slider" accessibilityLabel="Role slider" accessibilityValue={{min: 0, max: 10, now: 5}} /> <View accessible accessibilityRole="adjustable" accessibilityLabel="AccessibilityRole adjustable" accessibilityValue={{min: 0, max: 10, now: 5}} /> ``` The simulator's accessibility tree for both views: ``` main Role slider AXGroup traits: none AccessibilityRole adjustable AXAdjustable traits: adjustable this PR Role slider AXAdjustable traits: adjustable AccessibilityRole adjustable AXAdjustable traits: adjustable ``` - Added `derives_adjustable_trait_from_slider_role` to `AccessibilityPropsTest.cpp`, next to `derives_traits_from_role`. I couldn't run it, because I didn't find a way to run the ReactCommon gtests from the open-source checkout. - `node scripts/clang-format.js --check` passes on both files. - Not checked: the legacy architecture. Reviewed By: christophpurrer Differential Revision: D127482367 Pulled By: Abbondanzo fbshipit-source-id: bd315b64e1492c92d7a2b20831bab2dd636d2360
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary:
Stack
ARIA roles in React Native are implemented on top of accessibilityRole. This is lossy because there are many more ARIA roles than accessibilityRole. This is especially true for RN on desktop where accessibilityRole was designed around accessibility APIs only available on mobile.
This series of changes aims to change this implementation to instead pass the ARIA role to native, alongside any existing accessibilityRole. This gives the platform more control in exactly how to map an ARIA role to native behavior.
As an example, this would allow mapping any ARIA role to AutomationControlType on Windows without needing to fork to add new options to accessibilityRole.
It also allows greater implementation flexibility for other platforms down the line, but for now, iOS and Android behave the same as before (though with their implementation living in native).
Diff
This enables the
roleprop in iOS. ARIA role strings become convertible toUIAccessibilityTrait, which is the sink of most of the roles. We keep a list of traits derived fromrolevsaccessibilityRoleon the view, then inval and apply the result any time the prop for either is set.Changelog: [Internal]
Differential Revision: D45432530