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
    *
@@ -198,6 +206,18 @@ export type AccessibilityRole =
   | 'button'
   | 'togglebutton'
   | 'link'
+  | 'cardinal'
+  | 'ordinal'
+  | 'fraction'
+  | 'measure'
+  | 'time'
+  | 'date'
+  | 'telephone'
+  | 'electronic'
+  | 'decimal'
+  | 'money'
+  | 'digits'
+  | 'verbatim'
   | 'search'
   | 'image'
   | 'keyboardkey'
@@ -312,7 +332,6 @@ export type Role =
   | 'feed'
   | 'figure'
   | 'form'
-  | 'grid'
   | 'group'
   | 'heading'
   | 'img'

Libraries/Components/View/ViewAccessibility.js

@@ -19,6 +19,18 @@ export type AccessibilityRole =
   | 'dropdownlist'
   | 'togglebutton'
   | 'link'
+  | 'cardinal'
+  | 'ordinal'
+  | 'decimal'
+  | 'fraction'
+  | 'measure'
+  | 'time'
+  | 'date'
+  | 'telephone'
+  | 'electronic'
+  | '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

@@ -200,6 +200,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.
    *

React/Views/RCTViewManager.m

@@ -64,7 +64,6 @@ @implementation RCTConvert (UIAccessibilityTraits)
       @"tablist" : @(UIAccessibilityTraitNone),
       @"timer" : @(UIAccessibilityTraitNone),
       @"toolbar" : @(UIAccessibilityTraitNone),
-      @"grid" : @(UIAccessibilityTraitNone),
       @"pager" : @(UIAccessibilityTraitNone),
       @"scrollview" : @(UIAccessibilityTraitNone),
       @"horizontalscrollview" : @(UIAccessibilityTraitNone),
@@ -75,6 +74,18 @@ @implementation RCTConvert (UIAccessibilityTraits)
       @"iconmenu" : @(UIAccessibilityTraitNone),
       @"list" : @(UIAccessibilityTraitNone),
       @"grid" : @(UIAccessibilityTraitNone),
+      @"cardinal": @(UIAccessibilityTraitNone),
+      @"ordinal": @(UIAccessibilityTraitNone),
+      @"decimal": @(UIAccessibilityTraitNone),
+      @"fraction": @(UIAccessibilityTraitNone),
+      @"measure": @(UIAccessibilityTraitNone),
+      @"time": @(UIAccessibilityTraitNone),
+      @"date": @(UIAccessibilityTraitNone),
+      @"telephone": @(UIAccessibilityTraitNone),
+      @"electronic": @(UIAccessibilityTraitNone),
+      @"money": @(UIAccessibilityTraitNone),
+      @"digits": @(UIAccessibilityTraitNone),
+      @"verbatim": @(UIAccessibilityTraitNone),
     }),
     UIAccessibilityTraitNone,
     unsignedLongLongValue)

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

@@ -19,6 +19,7 @@
 import android.text.TextUtils;
 import android.text.style.AbsoluteSizeSpan;
 import android.text.style.ClickableSpan;
+import android.text.style.TtsSpan;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityEvent;
@@ -108,6 +109,18 @@ public enum AccessibilityRole {
     DROPDOWNLIST,
     TOGGLEBUTTON,
     LINK,
+    CARDINAL,
+    ORDINAL,
+    DECIMAL,
+    FRACTION,
+    MEASURE,
+    TIME,
+    DATE,
+    TELEPHONE,
+    ELECTRONIC,
+    MONEY,
+    DIGITS,
+    VERBATIM,
     SEARCH,
     IMAGE,
     IMAGEBUTTON,
@@ -175,6 +188,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,120 @@
+/*
+ * 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).";
+  private static final String[] SUPPORTED_UNIT_VALUES = {
+    TYPE_MEASURE, TYPE_TELEPHONE, TYPE_MONEY,
+  };
+
+  private static final Set<String> SUPPORTED_UNIT_SET =
+      new HashSet<String>(Arrays.asList(SUPPORTED_UNIT_VALUES));
+
+  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>();
+      if (accessibilityUnit == null || !ReactTtsSpan.SUPPORTED_UNIT_SET.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;
+    }
+  }
+}