Skip to content

fix(fabric, a11y): implement accessibility role #2293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 20, 2025
Merged

fix(fabric, a11y): implement accessibility role #2293

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c2426f7
[fabric][a11y] Enable accessibility property assignments for View
Dec 1, 2023
ed8a460
[fabric][a11y] Add role mapping for common traits
Dec 1, 2023
cabd8d2
[fabric][a11y] Add role mapping for desktop specific traits
Dec 1, 2023
d8bc0e2
exclude iOS only a11y props
Saadnajmi Aug 4, 2025
05353f8
Make accessibilityElement of type NSView on macOS
Saadnajmi Aug 19, 2025
80fa9e5
remove import, only expose AccessibilityLanguage on iOS
Saadnajmi Aug 19, 2025
6b43e60
Rework some of the roles to map closer to aria roles
Saadnajmi Aug 13, 2025
907df01
ifdef macOS only AccessibilityTraits
Saadnajmi Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,11 @@ NS_ASSUME_NONNULL_BEGIN
* transparent in favour of some subview.
* Defaults to `self`.
*/
#if !TARGET_OS_OSX // [macOS]
@property (nonatomic, strong, nullable, readonly) NSObject *accessibilityElement;
#else // [macOS
@property (nonatomic, strong, nullable, readonly) NSView *accessibilityElement;
#endif // macOS]

/**
* Insets used when hit testing inside this view.
Expand Down
26 changes: 23 additions & 3 deletions packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,28 +384,38 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
self.nativeId = RCTNSStringFromStringNilIfEmpty(newViewProps.nativeId);
}

#if !TARGET_OS_OSX // [macOS]
// `accessible`
if (oldViewProps.accessible != newViewProps.accessible) {
#if !TARGET_OS_OSX // [macOS]
self.accessibilityElement.isAccessibilityElement = newViewProps.accessible;
#else // [macOS
self.accessibilityElement.accessibilityElement = newViewProps.accessible;
#endif // macOS]
}

// `accessibilityLabel`
if (oldViewProps.accessibilityLabel != newViewProps.accessibilityLabel) {
self.accessibilityElement.accessibilityLabel = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityLabel);
}

#if !TARGET_OS_OSX // [macOS]
// `accessibilityLanguage`
if (oldViewProps.accessibilityLanguage != newViewProps.accessibilityLanguage) {
self.accessibilityElement.accessibilityLanguage =
RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityLanguage);
}
#endif // [macOS]

// `accessibilityHint`
if (oldViewProps.accessibilityHint != newViewProps.accessibilityHint) {
#if !TARGET_OS_OSX // [macOS]
self.accessibilityElement.accessibilityHint = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityHint);
#else // [macOS
self.accessibilityElement.accessibilityHelp = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityHint);
#endif // macOS]
}

#if !TARGET_OS_OSX // [macOS]
// `accessibilityViewIsModal`
if (oldViewProps.accessibilityViewIsModal != newViewProps.accessibilityViewIsModal) {
self.accessibilityElement.accessibilityViewIsModal = newViewProps.accessibilityViewIsModal;
Expand Down Expand Up @@ -435,13 +445,19 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
self.largeContentTitle = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityLargeContentTitle);
}
}
#endif // [macOS]

// `accessibilityTraits`
if (oldViewProps.accessibilityTraits != newViewProps.accessibilityTraits) {
#if !TARGET_OS_OSX // [macOS]
self.accessibilityElement.accessibilityTraits =
RCTUIAccessibilityTraitsFromAccessibilityTraits(newViewProps.accessibilityTraits);
#else // [macOS
self.accessibilityElement.accessibilityRole = RCTUIAccessibilityRoleFromAccessibilityTraits(newViewProps.accessibilityTraits);
#endif // macOS]
}

#if !TARGET_OS_OSX // [macOS]
// `accessibilityState`
if (oldViewProps.accessibilityState != newViewProps.accessibilityState) {
self.accessibilityTraits &= ~(UIAccessibilityTraitNotEnabled | UIAccessibilityTraitSelected);
Expand All @@ -458,6 +474,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
if (oldViewProps.accessibilityIgnoresInvertColors != newViewProps.accessibilityIgnoresInvertColors) {
self.accessibilityIgnoresInvertColors = newViewProps.accessibilityIgnoresInvertColors;
}
#endif // [macOS]

// `accessibilityValue`
if (oldViewProps.accessibilityValue != newViewProps.accessibilityValue) {
Expand All @@ -476,8 +493,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
self.accessibilityElement.accessibilityValue = nil;
}
}
#endif // [macOS]


// `testId`
if (oldViewProps.testId != newViewProps.testId) {
SEL setAccessibilityIdentifierSelector = @selector(setAccessibilityIdentifier:);
Expand Down Expand Up @@ -1303,7 +1319,11 @@ - (void)clearExistingBackgroundImageLayers

#pragma mark - Accessibility

#if !TARGET_OS_OSX // [macOS]
- (NSObject *)accessibilityElement
#else // [macOS
- (NSView *)accessibilityElement // macOS]
#endif // macOS]
{
return self;
}
Expand Down
97 changes: 96 additions & 1 deletion packages/react-native/React/Fabric/RCTConversions.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,102 @@ inline UIAccessibilityTraits RCTUIAccessibilityTraitsFromAccessibilityTraits(
}
return result;
};
#endif // [macOS]
#else // [macOS
inline NSAccessibilityRole RCTUIAccessibilityRoleFromAccessibilityTraits(
facebook::react::AccessibilityTraits accessibilityTraits)
{
using AccessibilityTraits = facebook::react::AccessibilityTraits;
if ((accessibilityTraits & AccessibilityTraits::Button) != AccessibilityTraits::None) {
if ((accessibilityTraits & AccessibilityTraits::Bar) != AccessibilityTraits::None) {
return NSAccessibilityToolbarRole;
}
if ((accessibilityTraits & AccessibilityTraits::PopUp) != AccessibilityTraits::None) {
return NSAccessibilityPopUpButtonRole;
}
if ((accessibilityTraits & AccessibilityTraits::Menu) != AccessibilityTraits::None) {
return NSAccessibilityMenuButtonRole;
}
return NSAccessibilityButtonRole;
}
if ((accessibilityTraits & AccessibilityTraits::Link) != AccessibilityTraits::None) {
return NSAccessibilityLinkRole;
}
if ((accessibilityTraits & AccessibilityTraits::Image) != AccessibilityTraits::None) {
return NSAccessibilityImageRole;
}
if ((accessibilityTraits & AccessibilityTraits::KeyboardKey) != AccessibilityTraits::None) {
return NSAccessibilityButtonRole;
}
if ((accessibilityTraits & AccessibilityTraits::StaticText) != AccessibilityTraits::None) {
return NSAccessibilityStaticTextRole;
}
if ((accessibilityTraits & AccessibilityTraits::SummaryElement) != AccessibilityTraits::None) {
return NSAccessibilityStaticTextRole;
}
if ((accessibilityTraits & AccessibilityTraits::UpdatesFrequently) != AccessibilityTraits::None) {
return NSAccessibilityProgressIndicatorRole;
}
if ((accessibilityTraits & AccessibilityTraits::SearchField) != AccessibilityTraits::None) {
return NSAccessibilityTextFieldRole;
}
if ((accessibilityTraits & AccessibilityTraits::Adjustable) != AccessibilityTraits::None) {
return NSAccessibilitySliderRole;
}
if ((accessibilityTraits & AccessibilityTraits::Header) != AccessibilityTraits::None) {
return NSAccessibilityStaticTextRole;
}
if ((accessibilityTraits & AccessibilityTraits::Switch) != AccessibilityTraits::None) {
return NSAccessibilityCheckBoxRole;
}
if ((accessibilityTraits & AccessibilityTraits::ComboBox) != AccessibilityTraits::None) {
return NSAccessibilityComboBoxRole;
}
if ((accessibilityTraits & AccessibilityTraits::Menu) != AccessibilityTraits::None) {
if ((accessibilityTraits & AccessibilityTraits::Bar) != AccessibilityTraits::None) {
return NSAccessibilityMenuBarRole;
}
if ((accessibilityTraits & AccessibilityTraits::Item) != AccessibilityTraits::None) {
return NSAccessibilityMenuItemRole;
}
return NSAccessibilityMenuRole;
}
if ((accessibilityTraits & AccessibilityTraits::Radio) != AccessibilityTraits::None) {
if ((accessibilityTraits & AccessibilityTraits::Group) != AccessibilityTraits::None) {
return NSAccessibilityRadioGroupRole;
}
return NSAccessibilityRadioButtonRole;
}
if ((accessibilityTraits & AccessibilityTraits::ScrollBar) != AccessibilityTraits::None) {
return NSAccessibilityScrollBarRole;
}
if ((accessibilityTraits & AccessibilityTraits::SpinButton) != AccessibilityTraits::None) {
return NSAccessibilityIncrementorRole;
}
if ((accessibilityTraits & AccessibilityTraits::TabBar) != AccessibilityTraits::None) {
return NSAccessibilityTabGroupRole;
}
if ((accessibilityTraits & AccessibilityTraits::Tab) != AccessibilityTraits::None) {
if ((accessibilityTraits & AccessibilityTraits::List) != AccessibilityTraits::None) {
return NSAccessibilityTabGroupRole;
}
return NSAccessibilityRadioButtonRole;
}
if ((accessibilityTraits & AccessibilityTraits::Disclosure) != AccessibilityTraits::None) {
return NSAccessibilityDisclosureTriangleRole;
}
if ((accessibilityTraits & AccessibilityTraits::Group) != AccessibilityTraits::None) {
return NSAccessibilityGroupRole;
}
if ((accessibilityTraits & AccessibilityTraits::List) != AccessibilityTraits::None) {
return NSAccessibilityListRole;
}
if ((accessibilityTraits & AccessibilityTraits::Table) != AccessibilityTraits::None) {
return NSAccessibilityTableRole;
}

return NSAccessibilityUnknownRole;
};
#endif // macOS]

inline CATransform3D RCTCATransform3DFromTransformMatrix(const facebook::react::Transform &transformMatrix)
{
Expand Down
15 changes: 15 additions & 0 deletions packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,21 @@ enum class AccessibilityTraits : uint32_t {
Header = (1 << 15),
Switch = (1 << 16),
TabBar = (1 << 17),
// [macOS
ComboBox = (1 << 18),
Menu = (1 << 19),
PopUp = (1 << 20),
Bar = (1 << 21),
Item = (1 << 22),
Group = (1 << 23),
List = (1 << 24),
Tab = (1 << 25),
Table = (1 << 26),
Disclosure = (1 << 27),
Radio = (1 << 28),
ScrollBar = (1 << 29),
SpinButton = (1 << 30),
// macOS]
};

constexpr enum AccessibilityTraits operator|(
Expand Down
Loading