1/n Adding Android support for Accessibility TtsSpan API - Support for accessibilitySpan and accessibilityLabel props in nested Text

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -19,6 +19,7 @@ const UIView = {
   accessibilityLiveRegion: true,
   accessibilityRole: true,
   accessibilityState: true,
+  accessibilityUnit: true,
   accessibilityValue: true,
   accessibilityHint: true,
   accessibilityLanguage: true,

Libraries/Components/View/ViewAccessibility.d.ts

@@ -47,6 +47,14 @@ export interface AccessibilityProps
    */
   accessibilityState?: AccessibilityState | undefined;
 
+  /**
+   * Used with nested Text and accessibilityRole measure, money or telephone to specify the unit to announce.
+   * Measure refer to https://developer.android.com/reference/android/text/style/TtsSpan#ARG_UNIT
+   * Currency refer to https://developer.android.com/reference/android/text/style/TtsSpan#ARG_CURRENCY
+   * Telephone refer to  https://developer.android.com/reference/android/text/style/TtsSpan#ARG_NUMBER_PARTS
+   */
+  accessibilityUnit?: string | undefined;
+
   /**
    * alias for accessibilityState
    *

Libraries/Components/View/ViewAccessibility.js

@@ -19,6 +19,20 @@ export type AccessibilityRole =
   | 'dropdownlist'
   | 'togglebutton'
   | 'link'
+  | 'cardinal'
+  | 'ordinal'
+  | 'decimal'
+  | 'fraction'
+  | 'cardinal'
+  | 'measure'
+  | 'time'
+  | 'date'
+  | 'telephone'
+  | 'electronic'
+  | 'decimal'
+  | 'money'
+  | 'digits'
+  | 'verbatim'
   | 'search'
   | 'image'
   | 'keyboardkey'

Libraries/Components/View/ViewPropTypes.js

@@ -501,6 +501,15 @@ export type ViewProps = $ReadOnly<{|
    * Indicates to accessibility services that UI Component is in a specific State.
    */
   accessibilityState?: ?AccessibilityState,
+
+  /**
+   * Used with nested Text and accessibilityRole measure, money or telephone to specify the unit to announce.
+   * Measure refer to https://developer.android.com/reference/android/text/style/TtsSpan#ARG_UNIT
+   * Currency refer to https://developer.android.com/reference/android/text/style/TtsSpan#ARG_CURRENCY
+   * Telephone refer to  https://developer.android.com/reference/android/text/style/TtsSpan#ARG_NUMBER_PARTS
+   */
+  accessibilityUnit?: ?Stringish,
+
   accessibilityValue?: ?AccessibilityValue,
 
   /**

Libraries/NativeComponent/BaseViewConfig.android.js

@@ -176,6 +176,7 @@ const validAttributesForNonEventProps = {
   accessibilityCollection: true,
   accessibilityCollectionItem: true,
   accessibilityState: true,
+  accessibilityUnit: true,
   accessibilityActions: true,
   accessibilityValue: true,
   importantForAccessibility: true,

Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -189,6 +189,7 @@ const validAttributesForNonEventProps = {
   transform: {diff: require('../Utilities/differ/matricesDiffer')},
   accessibilityRole: true,
   accessibilityState: true,
+  accessibilityUnit: true,
   nativeID: true,
   pointerEvents: true,
   removeClippedSubviews: true,

Libraries/Text/TextProps.js

@@ -201,6 +201,14 @@ export type TextProps = $ReadOnly<{|
    * Android Only
    */
 
+  /**
+   * Used with nested Text and accessibilityRole measure, money or telephone to specify the unit to announce.
+   * Measure refer to https://developer.android.com/reference/android/text/style/TtsSpan#ARG_UNIT
+   * Currency refer to https://developer.android.com/reference/android/text/style/TtsSpan#ARG_CURRENCY
+   * Telephone refer to  https://developer.android.com/reference/android/text/style/TtsSpan#ARG_NUMBER_PARTS
+   */
+  accessibilityUnit?: ?string,
+
   /**
    * Specifies the disabled state of the text view for testing purposes.
    *

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactAccessibilityDelegate.java

@@ -18,6 +18,7 @@
 import android.text.Spanned;
 import android.text.style.AbsoluteSizeSpan;
 import android.text.style.ClickableSpan;
+import android.text.style.TtsSpan;
 import android.view.View;
 import android.view.accessibility.AccessibilityEvent;
 import android.widget.TextView;
@@ -101,6 +102,18 @@ public enum AccessibilityRole {
     DROPDOWNLIST,
     TOGGLEBUTTON,
     LINK,
+    CARDINAL,
+    ORDINAL,
+    DECIMAL,
+    FRACTION,
+    MEASURE,
+    TIME,
+    DATE,
+    TELEPHONE,
+    ELECTRONIC,
+    MONEY,
+    DIGITS,
+    VERBATIM,
     SEARCH,
     IMAGE,
     IMAGEBUTTON,
@@ -168,6 +181,30 @@ public static String getValue(AccessibilityRole role) {
           return "android.widget.AbsListView";
         case GRID:
           return "android.widget.GridView";
+        case ORDINAL:
+          return TtsSpan.TYPE_ORDINAL;
+        case DECIMAL:
+          return TtsSpan.TYPE_DECIMAL;
+        case FRACTION:
+          return TtsSpan.TYPE_FRACTION;
+        case CARDINAL:
+          return TtsSpan.TYPE_CARDINAL;
+        case MEASURE:
+          return TtsSpan.TYPE_MEASURE;
+        case TIME:
+          return TtsSpan.TYPE_TIME;
+        case DATE:
+          return TtsSpan.TYPE_DATE;
+        case TELEPHONE:
+          return TtsSpan.TYPE_TELEPHONE;
+        case ELECTRONIC:
+          return TtsSpan.TYPE_ELECTRONIC;
+        case MONEY:
+          return TtsSpan.TYPE_MONEY;
+        case DIGITS:
+          return TtsSpan.TYPE_DIGITS;
+        case VERBATIM:
+          return TtsSpan.TYPE_VERBATIM;
         case SCROLLVIEW:
           return "android.widget.ScrollView";
         case HORIZONTALSCROLLVIEW:

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -155,6 +155,7 @@ public class ViewProps {
   public static final String ACCESSIBILITY_LIVE_REGION = "accessibilityLiveRegion";
   public static final String ACCESSIBILITY_ROLE = "accessibilityRole";
   public static final String ACCESSIBILITY_STATE = "accessibilityState";
+  public static final String ACCESSIBILITY_UNIT = "accessibilityUnit";
   public static final String ACCESSIBILITY_ACTIONS = "accessibilityActions";
   public static final String ACCESSIBILITY_VALUE = "accessibilityValue";
   public static final String ACCESSIBILITY_LABELLED_BY = "accessibilityLabelledBy";

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTtsSpan.java

@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text;
+
+import android.os.Parcel;
+import android.os.PersistableBundle;
+import android.text.style.TtsSpan;
+import com.facebook.common.logging.FLog;
+import com.facebook.react.uimanager.ReactAccessibilityDelegate.AccessibilityRole;
+import java.util.Arrays;
+import java.util.Currency;
+import java.util.HashSet;
+import java.util.Set;
+import javax.annotation.Nullable;
+
+/*
+ * Wraps {@link TtsSpan} as a {@link ReactSpan}.
+ * A span that supplies additional meta-data for the associated text intended
+ * for text-to-speech engines. If the text is being processed by a
+ * text-to-speech engine, the engine may use the data in this span in addition
+ * to or instead of its associated text.
+ *
+ * Each instance of a TtsSpan has a type, for example {@link #TYPE_DATE}
+ * or {@link #TYPE_MEASURE}. And a list of arguments, provided as
+ * key-value pairs in a bundle.
+ *
+ * The inner classes are there for convenience and provide builders for each
+ * TtsSpan type.
+ */
+public class ReactTtsSpan extends TtsSpan implements ReactSpan {
+  private static final String TAG = ReactTtsSpan.class.getSimpleName();
+  private static final String TYPE_MONEY_WARNING_MSG =
+      "The accessibilityUnit format may not be compatible"
+          + " with the format supported ISO 4217 (for example 'USD').";
+  private static final String TYPE_TELEPHONE_WARNING_MSG =
+      "Failed to retrieve telephone number (for example '0112123432').";
+  private static final String TYPE_MEASURE_WARNING_MSG =
+      "Failed to retrieve unit type (for ex. meter, second, milli).";
+
+  public ReactTtsSpan(String type, PersistableBundle args) {
+    super(type, args);
+  }
+
+  public ReactTtsSpan(Parcel src) {
+    super(src);
+  }
+
+  public static class Builder<C extends Builder<?>> {
+    private final String mType;
+    private PersistableBundle mArgs = new PersistableBundle();
+
+    public Builder(String type) {
+      mType = type;
+    }
+
+    public Builder(AccessibilityRole type, @Nullable String accessibilityUnit) {
+      String typeConvertedToString = AccessibilityRole.getValue(type);
+      mType = typeConvertedToString;
+      String roleClassName = AccessibilityRole.getValue(type);
+      String warningMessage = "";
+      Set<String> supportedTypes = new HashSet<String>();
+      supportedTypes.addAll(
+          Arrays.asList(
+              new String[] {TtsSpan.TYPE_MONEY, TtsSpan.TYPE_TELEPHONE, TtsSpan.TYPE_MEASURE}));
+      if (accessibilityUnit == null || !supportedTypes.contains(roleClassName)) {
+        return;
+      }
+      try {
+        if (roleClassName == ReactTtsSpan.TYPE_MONEY) {
+          warningMessage = ReactTtsSpan.TYPE_MONEY_WARNING_MSG;
+          Currency.getInstance(accessibilityUnit);
+          setStringArgument(ReactTtsSpan.ARG_INTEGER_PART, "");
+          setStringArgument(ReactTtsSpan.ARG_CURRENCY, accessibilityUnit);
+        }
+        if (roleClassName == ReactTtsSpan.TYPE_TELEPHONE) {
+          warningMessage = ReactTtsSpan.TYPE_TELEPHONE_WARNING_MSG;
+          setStringArgument(ReactTtsSpan.ARG_NUMBER_PARTS, accessibilityUnit);
+        }
+        // https://developer.android.com/reference/android/text/style/TtsSpan#ARG_UNIT
+        if (roleClassName == ReactTtsSpan.TYPE_MEASURE) {
+          warningMessage = ReactTtsSpan.TYPE_MEASURE_WARNING_MSG;
+          setStringArgument(ReactTtsSpan.ARG_UNIT, accessibilityUnit);
+        }
+      } catch (Exception e) {
+        FLog.e(
+            TAG,
+            "Failed to create ReactTtsSpan.Builder with params type: "
+                + type
+                + " and accessibilityUnit: "
+                + accessibilityUnit
+                + " "
+                + warningMessage
+                + "Error: "
+                + e);
+      }
+    }
+
+    public ReactTtsSpan build() {
+      return new ReactTtsSpan(mType, mArgs);
+    }
+
+    public C setIntArgument(String arg, int value) {
+      mArgs.putInt(arg, value);
+      return (C) this;
+    }
+
+    public C setStringArgument(String arg, String value) {
+      mArgs.putString(arg, value);
+      return (C) this;
+    }
+  }
+}

ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java

@@ -10,6 +10,7 @@
 import android.os.Build;
 import android.text.Layout;
 import android.text.TextUtils;
+import android.text.style.TtsSpan;
 import android.util.LayoutDirection;
 import android.view.Gravity;
 import androidx.annotation.Nullable;
@@ -18,12 +19,15 @@
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.mapbuffer.MapBuffer;
 import com.facebook.react.uimanager.PixelUtil;
-import com.facebook.react.uimanager.ReactAccessibilityDelegate;
+import com.facebook.react.uimanager.ReactAccessibilityDelegate.AccessibilityRole;
 import com.facebook.react.uimanager.ReactStylesDiffMap;
 import com.facebook.react.uimanager.ViewProps;
 import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.HashSet;
 import java.util.Iterator;
 import java.util.List;
+import java.util.Set;
 
 // TODO: T63643819 refactor naming of TextAttributeProps to make explicit that this represents
 // TextAttributes and not TextProps. As part of this refactor extract methods that don't belong to
@@ -53,6 +57,7 @@ public class TextAttributeProps {
   public static final short TA_KEY_IS_HIGHLIGHTED = 20;
   public static final short TA_KEY_LAYOUT_DIRECTION = 21;
   public static final short TA_KEY_ACCESSIBILITY_ROLE = 22;
+  public static final short TA_KEY_ACCESSIBILITY_UNIT = 47;
 
   public static final int UNSET = -1;
 
@@ -100,9 +105,11 @@ public class TextAttributeProps {
   protected boolean mIsLineThroughTextDecorationSet = false;
   protected boolean mIncludeFontPadding = true;
 
-  protected @Nullable ReactAccessibilityDelegate.AccessibilityRole mAccessibilityRole = null;
+  protected @Nullable AccessibilityRole mAccessibilityRole = null;
   protected boolean mIsAccessibilityRoleSet = false;
+  protected @Nullable String mAccessibilityUnit = null;
   protected boolean mIsAccessibilityLink = false;
+  protected boolean mIsAccessibilityTtsSpan = false;
 
   protected int mFontStyle = UNSET;
   protected int mFontWeight = UNSET;
@@ -205,6 +212,9 @@ public static TextAttributeProps fromMapBuffer(MapBuffer props) {
         case TA_KEY_ACCESSIBILITY_ROLE:
           result.setAccessibilityRole(entry.getStringValue());
           break;
+        case TA_KEY_ACCESSIBILITY_UNIT:
+          result.setAccessibilityUnit(entry.getStringValue());
+          break;
       }
     }
 
@@ -602,10 +612,34 @@ private void setTextTransform(@Nullable String textTransform) {
   private void setAccessibilityRole(@Nullable String accessibilityRole) {
     if (accessibilityRole != null) {
       mIsAccessibilityRoleSet = true;
-      mAccessibilityRole =
-          ReactAccessibilityDelegate.AccessibilityRole.fromValue(accessibilityRole);
-      mIsAccessibilityLink =
-          mAccessibilityRole.equals(ReactAccessibilityDelegate.AccessibilityRole.LINK);
+      mAccessibilityRole = AccessibilityRole.fromValue(accessibilityRole);
+      mIsAccessibilityLink = mAccessibilityRole.equals(AccessibilityRole.LINK);
+      String roleClassName =
+          AccessibilityRole.getValue(AccessibilityRole.fromValue(accessibilityRole));
+      Set<String> supportedTypes = new HashSet<String>();
+      supportedTypes.addAll(
+          Arrays.asList(
+              new String[] {
+                TtsSpan.TYPE_ORDINAL,
+                TtsSpan.TYPE_DECIMAL,
+                TtsSpan.TYPE_FRACTION,
+                TtsSpan.TYPE_MEASURE,
+                TtsSpan.TYPE_TIME,
+                TtsSpan.TYPE_DATE,
+                TtsSpan.TYPE_TELEPHONE,
+                TtsSpan.TYPE_ELECTRONIC,
+                TtsSpan.TYPE_MONEY,
+                TtsSpan.TYPE_DIGITS,
+                TtsSpan.TYPE_VERBATIM,
+              }));
+      mIsAccessibilityTtsSpan =
+          supportedTypes.contains(roleClassName) && Build.VERSION.SDK_INT >= 21;
+    }
+  }
+
+  private void setAccessibilityUnit(@Nullable String accessibilityUnit) {
+    if (accessibilityUnit != null) {
+      mAccessibilityUnit = accessibilityUnit;
     }
   }
 

ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManagerMapBuffer.java

@@ -143,6 +143,12 @@ private static void buildSpannableFromFragment(
         if (textAttributes.mIsAccessibilityLink) {
           ops.add(new SetSpanOperation(start, end, new ReactClickableSpan(reactTag)));
         }
+        if (textAttributes.mIsAccessibilityTtsSpan) {
+          ReactTtsSpan.Builder builder =
+              new ReactTtsSpan.Builder(
+                  textAttributes.mAccessibilityRole, textAttributes.mAccessibilityUnit);
+          ops.add(new SetSpanOperation(start, end, builder.build()));
+        }
         if (textAttributes.mIsColorSet) {
           ops.add(
               new SetSpanOperation(