TtsSpan works with parent Text component

Author: fabOnReact

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

@@ -37,7 +37,6 @@
 import java.util.List;
 import java.util.Map;
 import java.util.Objects;
-import java.util.Set;
 
 /**
  * {@link ReactShadowNode} abstract class for spannable text nodes.
@@ -510,8 +509,8 @@ public void setIsAccessibilityLink(@Nullable String accessibilityRole) {
       String roleClassName =
           AccessibilityRole.getValue(AccessibilityRole.fromValue(accessibilityRole));
       mIsAccessibilityLink = Objects.equals(accessibilityRole, "link");
-      Set<String> UNIT_TYPES = Set.of(ReactTtsSpan.TYPE_VERBATIM, ReactTtsSpan.TYPE_DATE);
-      mAccessibilityUnit = UNIT_TYPES.contains(roleClassName) ? roleClassName : null;
+      mAccessibilityUnit =
+          ReactTtsSpan.SUPPORTED_UNIT_TYPES.contains(roleClassName) ? roleClassName : null;
       markUpdated();
     }
   }

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

@@ -10,11 +10,15 @@
 import android.os.Parcel;
 import android.os.PersistableBundle;
 import android.text.style.TtsSpan;
+import java.util.Set;
 
 /*
  * Wraps {@link BackgroundColorSpan} as a {@link ReactSpan}.
  */
 public class ReactTtsSpan extends TtsSpan implements ReactSpan {
+  // supported TYPES in react-native
+  public static Set<String> SUPPORTED_UNIT_TYPES = Set.of(TYPE_VERBATIM, TYPE_DATE);
+
   public ReactTtsSpan(String type, PersistableBundle args) {
     super(type, args);
   }

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

@@ -18,7 +18,7 @@
 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;
@@ -100,13 +100,10 @@ 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 boolean mIsAccessibilityUnitSet = false;
-  protected @Nullable ReactAccessibilityDelegate.AccessibilityRole mAccessibilityUnit =
-      ReactAccessibilityDelegate.AccessibilityRole.NONE;
+  protected @Nullable String mAccessibilityUnit = null;
   protected boolean mIsAccessibilityLink = false;
-  protected boolean mIsAccessibilityUnit = false;
 
   protected int mFontStyle = UNSET;
   protected int mFontWeight = UNSET;
@@ -606,12 +603,13 @@ private void setTextTransform(@Nullable String textTransform) {
   private void setAccessibilityRole(@Nullable String accessibilityRole) {
     if (accessibilityRole != null) {
       mIsAccessibilityRoleSet = true;
-      mAccessibilityRole =
-          ReactAccessibilityDelegate.AccessibilityRole.fromValue(accessibilityRole);
+      mAccessibilityRole = AccessibilityRole.fromValue(accessibilityRole);
       mIsAccessibilityLink =
-          mAccessibilityRole.equals(ReactAccessibilityDelegate.AccessibilityRole.LINK);
-      mIsAccessibilityUnit =
-          mAccessibilityRole.equals(ReactAccessibilityDelegate.AccessibilityRole.VERBATIM);
+          mAccessibilityRole.equals(AccessibilityRole.LINK);
+      String roleClassName =
+          AccessibilityRole.getValue(AccessibilityRole.fromValue(accessibilityRole));
+      mAccessibilityUnit =
+          ReactTtsSpan.SUPPORTED_UNIT_TYPES.contains(roleClassName) ? roleClassName : null;
     }
   }
 

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

@@ -19,6 +19,7 @@
 import android.text.StaticLayout;
 import android.text.TextPaint;
 import android.util.LayoutDirection;
+import android.util.Log;
 import android.util.LruCache;
 import android.view.View;
 import androidx.annotation.NonNull;
@@ -125,7 +126,11 @@ private static void buildSpannableFromFragment(
                 new TextInlineViewPlaceholderSpan(reactTag, (int) width, (int) height)));
       } else if (end >= start) {
         if (textAttributes.mIsAccessibilityLink) {
-          ops.add(new SetSpanOperation(start, end, new ReactClickableSpan(reactTag)));
+          /*
+          ops.add(
+              new SetSpanOperation(
+                  start, end, new ReactTtsSpan.Builder(ReactTtsSpan.TYPE_VERBATIM).build()));
+                  */
         }
         if (textAttributes.mIsColorSet) {
           ops.add(

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

@@ -143,6 +143,11 @@ private static void buildSpannableFromFragment(
         if (textAttributes.mIsAccessibilityLink) {
           ops.add(new SetSpanOperation(start, end, new ReactClickableSpan(reactTag)));
         }
+        if (textAttributes.mAccessibilityUnit != null && Build.VERSION.SDK_INT >= 21) {
+          ops.add(
+              new SetSpanOperation(
+                  start, end, new ReactTtsSpan.Builder(textAttributes.mAccessibilityUnit).build()));
+        }
         if (textAttributes.mIsColorSet) {
           ops.add(
               new SetSpanOperation(

packages/rn-tester/js/examples/Text/TextAdjustsDynamicLayoutExample.js

@@ -17,15 +17,8 @@ export default function TextAdjustsDynamicLayoutExample(props: {}): React.Node {
   return (
     <>
       <View>
-        <Text accessible={true}>
-          My number is{' '}
-          <Text
-            accessibilityRole="verbatim"
-            accessible={true}
-            style={{backgroundColor: 'red'}}>
-            02/07/1987
-          </Text>
-          .
+        <Text accessibilityRole="verbatim" accessible={true}>
+          please spell
         </Text>
       </View>
     </>