Integrated iOS-only accessibilityLanguage prop

Libraries/Components/Button.js

@@ -146,6 +146,7 @@ type ButtonProps = $ReadOnly<{|
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
   accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
 |}>;
 
 /**
@@ -277,6 +278,7 @@ class Button extends React.Component<ButtonProps> {
       accessible,
       accessibilityActions,
       accessibilityHint,
+      accessibilityLanguage,
       onAccessibilityAction,
     } = this.props;
     const buttonStyles = [styles.button];
@@ -320,6 +322,7 @@ class Button extends React.Component<ButtonProps> {
         onAccessibilityAction={onAccessibilityAction}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
+        accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
         hasTVPreferredFocus={hasTVPreferredFocus}

Libraries/Components/Pressable/Pressable.js

@@ -43,6 +43,7 @@ type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
   accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),

Libraries/Components/Touchable/TouchableBounce.js

@@ -137,6 +137,7 @@ class TouchableBounce extends React.Component<Props, State> {
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
+        accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={this.props.accessibilityState}
         accessibilityActions={this.props.accessibilityActions}

Libraries/Components/Touchable/TouchableHighlight.js

@@ -296,6 +296,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
+        accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={accessibilityState}
         accessibilityValue={this.props.accessibilityValue}

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -271,6 +271,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         ),
         accessible: this.props.accessible !== false,
         accessibilityHint: this.props.accessibilityHint,
+        accessibilityLanguage: this.props.accessibilityLanguage,
         accessibilityLabel: this.props.accessibilityLabel,
         accessibilityRole: this.props.accessibilityRole,
         accessibilityState: accessibilityState,

Libraries/Components/Touchable/TouchableOpacity.js

@@ -225,6 +225,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
+        accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={accessibilityState}
         accessibilityActions={this.props.accessibilityActions}

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -33,6 +33,7 @@ type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
   accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
   accessibilityIgnoresInvertColors?: ?boolean,
   accessibilityLabel?: ?Stringish,
   accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),
@@ -72,6 +73,7 @@ const PASSTHROUGH_PROPS = [
   'accessibilityActions',
   'accessibilityElementsHidden',
   'accessibilityHint',
+  'accessibilityLanguage',
   'accessibilityIgnoresInvertColors',
   'accessibilityLabel',
   'accessibilityLiveRegion',

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -21,6 +21,7 @@ const UIView = {
   accessibilityState: true,
   accessibilityValue: true,
   accessibilityHint: true,
+  accessibilityLanguage: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,

Libraries/Components/View/ViewPropTypes.js

@@ -415,6 +415,15 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityHint?: ?Stringish,
 
+  /**
+   * Indicates to the accessibility services that the UI component is in
+   * a specific language. The provided string should be formatted following
+   * the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
+   *
+   * @platform ios
+   */
+  accessibilityLanguage?: ?Stringish,
+
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */

Libraries/NativeComponent/PlatformBaseViewConfig.js

@@ -147,6 +147,7 @@ const PlatformBaseViewConfig: PartialViewConfigWithoutName =
           accessibilityLabelledBy: true,
           accessibilityLabel: true,
           accessibilityHint: true,
+          accessibilityLanguage: true,
           accessibilityRole: true,
           accessibilityState: true,
           accessibilityActions: true,
@@ -354,6 +355,7 @@ const PlatformBaseViewConfig: PartialViewConfigWithoutName =
           accessibilityActions: true,
           accessibilityLabel: true,
           accessibilityHint: true,
+          accessibilityLanguage: true,
           accessibilityValue: true,
           accessibilityViewIsModal: true,
           accessibilityElementsHidden: true,

Libraries/Text/TextProps.js

@@ -44,6 +44,7 @@ export type TextProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityHint?: ?Stringish,
+  accessibilityLanguage?: ?Stringish,
   accessibilityLabel?: ?Stringish,
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,

React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentAccessibilityProvider.mm

@@ -67,6 +67,7 @@ - (instancetype)initWithString:(facebook::react::AttributedString)attributedStri
   firstElement.isAccessibilityElement = YES;
   firstElement.accessibilityTraits = _view.accessibilityTraits;
   firstElement.accessibilityLabel = accessibilityLabel;
+  firstElement.accessibilityLanguage = _view.accessibilityLanguage;
   firstElement.accessibilityFrame = UIAccessibilityConvertFrameToScreenCoordinates(_view.bounds, _view);
   [firstElement setAccessibilityActivationPoint:CGPointMake(
                                                     firstElement.accessibilityFrame.origin.x + 1.0,

React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -296,6 +296,12 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     self.accessibilityElement.accessibilityLabel = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityLabel);
   }
 
+  // `accessibilityLanguage`
+  if (oldViewProps.accessibilityLanguage != newViewProps.accessibilityLanguage) {
+    self.accessibilityElement.accessibilityLanguage =
+        RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityLanguage);
+  }
+
   // `accessibilityHint`
   if (oldViewProps.accessibilityHint != newViewProps.accessibilityHint) {
     self.accessibilityElement.accessibilityHint = RCTNSStringFromStringNilIfEmpty(newViewProps.accessibilityHint);

React/Views/RCTViewManager.m

@@ -124,6 +124,7 @@ - (RCTShadowView *)shadowView
 RCT_REMAP_VIEW_PROPERTY(accessibilityActions, reactAccessibilityElement.accessibilityActions, NSDictionaryArray)
 RCT_REMAP_VIEW_PROPERTY(accessibilityLabel, reactAccessibilityElement.accessibilityLabel, NSString)
 RCT_REMAP_VIEW_PROPERTY(accessibilityHint, reactAccessibilityElement.accessibilityHint, NSString)
+RCT_REMAP_VIEW_PROPERTY(accessibilityLanguage, reactAccessibilityElement.accessibilityLanguage, NSString)
 RCT_REMAP_VIEW_PROPERTY(accessibilityValue, reactAccessibilityElement.accessibilityValueInternal, NSDictionary)
 RCT_REMAP_VIEW_PROPERTY(accessibilityViewIsModal, reactAccessibilityElement.accessibilityViewIsModal, BOOL)
 RCT_REMAP_VIEW_PROPERTY(accessibilityElementsHidden, reactAccessibilityElement.accessibilityElementsHidden, BOOL)

React/Views/UIView+React.h

@@ -120,6 +120,7 @@
 @property (nonatomic, copy) NSDictionary<NSString *, id> *accessibilityState;
 @property (nonatomic, copy) NSArray<NSDictionary *> *accessibilityActions;
 @property (nonatomic, copy) NSDictionary *accessibilityValueInternal;
+@property (nonatomic, copy) NSString *accessibilityLanguage;
 
 /**
  * Used in debugging to get a description of the view hierarchy rooted at

React/Views/UIView+React.m

@@ -315,6 +315,17 @@ - (void)setAccessibilityActions:(NSArray<NSDictionary *> *)accessibilityActions
       self, @selector(accessibilityActions), accessibilityActions, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
 }
 
+- (NSString *)accessibilityLanguage
+{
+  return objc_getAssociatedObject(self, _cmd);
+}
+
+- (void)setAccessibilityLanguage:(NSString *)accessibilityLanguage
+{
+  objc_setAssociatedObject(
+      self, @selector(accessibilityLanguage), accessibilityLanguage, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+}
+
 - (NSString *)accessibilityRole
 {
   return objc_getAssociatedObject(self, _cmd);

ReactCommon/react/renderer/components/view/AccessibilityProps.cpp

@@ -49,6 +49,12 @@ AccessibilityProps::AccessibilityProps(
           "accessibilityHint",
           sourceProps.accessibilityHint,
           "")),
+      accessibilityLanguage(convertRawProp(
+          context,
+          rawProps,
+          "accessibilityLanguage",
+          sourceProps.accessibilityLanguage,
+          "")),
       accessibilityValue(convertRawProp(
           context,
           rawProps,

ReactCommon/react/renderer/components/view/AccessibilityProps.h

@@ -31,6 +31,7 @@ class AccessibilityProps {
   AccessibilityState accessibilityState;
   std::string accessibilityLabel{""};
   std::string accessibilityHint{""};
+  std::string accessibilityLanguage{""};
   AccessibilityValue accessibilityValue;
   std::vector<AccessibilityAction> accessibilityActions{};
   bool accessibilityViewIsModal{false};

packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -55,6 +55,9 @@ class AccessibilityIOSExample extends React.Component<Props> {
             This view's children are hidden from the accessibility tree
           </Text>
         </View>
+        <View accessible={true} accessibilityLanguage="it-IT">
+          <Text>This view's language should be `it-IT`</Text>
+        </View>
       </RNTesterBlock>
     );
   }