feat: added accessibility value aliases

Libraries/Components/Pressable/Pressable.js

@@ -50,6 +50,10 @@ type Props = $ReadOnly<{|
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
+  'aria-valuemax'?: AccessibilityValue['max'],
+  'aria-valuemin'?: AccessibilityValue['min'],
+  'aria-valuenow'?: AccessibilityValue['now'],
+  'aria-valuetext'?: AccessibilityValue['text'],
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
 
@@ -238,12 +242,32 @@ function Pressable(props: Props, forwardedRef): React.Node {
   _accessibilityState =
     disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
 
+  const accessibilityValue = {
+    max:
+      props['aria-valuemax'] !== null
+        ? props['aria-valuemax']
+        : props.accessibilityValue?.max,
+    min:
+      props['aria-valuemin'] !== null
+        ? props['aria-valuemin']
+        : props.accessibilityValue?.min,
+    now:
+      props['aria-valuenow'] !== null
+        ? props['aria-valuenow']
+        : props.accessibilityValue?.now,
+    text:
+      props['aria-valuetext'] !== null
+        ? props['aria-valuetext']
+        : props.accessibilityValue?.max,
+  };
+
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false,
+    accessibilityValue,
     hitSlop,
   };
 

Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

@@ -11,6 +11,14 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -39,6 +47,14 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -79,6 +95,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -107,6 +131,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -151,6 +183,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -179,6 +219,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -225,6 +273,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -253,6 +309,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -307,6 +371,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -335,6 +407,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
       "selected": undefined,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}

Libraries/Components/Touchable/TouchableBounce.js

@@ -143,6 +143,25 @@ class TouchableBounce extends React.Component<Props, State> {
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
     };
 
+    const accessibilityValue = {
+      max:
+        this.props['aria-valuemax'] !== null
+          ? this.props['aria-valuemax']
+          : this.props.accessibilityValue?.max,
+      min:
+        this.props['aria-valuemin'] !== null
+          ? this.props['aria-valuemin']
+          : this.props.accessibilityValue?.min,
+      now:
+        this.props['aria-valuenow'] !== null
+          ? this.props['aria-valuenow']
+          : this.props.accessibilityValue?.now,
+      text:
+        this.props['aria-valuetext'] !== null
+          ? this.props['aria-valuetext']
+          : this.props.accessibilityValue?.text,
+    };
+
     return (
       <Animated.View
         style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
@@ -154,7 +173,7 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityState={_accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        accessibilityValue={this.props.accessibilityValue}
+        accessibilityValue={accessibilityValue}
         importantForAccessibility={
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'

Libraries/Components/Touchable/TouchableHighlight.js

@@ -291,6 +291,25 @@ class TouchableHighlight extends React.Component<Props, State> {
           }
         : this.props.accessibilityState;
 
+    const accessibilityValue = {
+      max:
+        this.props['aria-valuemax'] !== null
+          ? this.props['aria-valuemax']
+          : this.props.accessibilityValue?.max,
+      min:
+        this.props['aria-valuemin'] !== null
+          ? this.props['aria-valuemin']
+          : this.props.accessibilityValue?.min,
+      now:
+        this.props['aria-valuenow'] !== null
+          ? this.props['aria-valuenow']
+          : this.props.accessibilityValue?.now,
+      text:
+        this.props['aria-valuetext'] !== null
+          ? this.props['aria-valuetext']
+          : this.props.accessibilityValue?.text,
+    };
+
     return (
       <View
         accessible={this.props.accessible !== false}
@@ -299,7 +318,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityLanguage={this.props.accessibilityLanguage}
         accessibilityRole={this.props.accessibilityRole}
         accessibilityState={accessibilityState}
-        accessibilityValue={this.props.accessibilityValue}
+        accessibilityValue={accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         importantForAccessibility={

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -273,6 +273,25 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           }
         : _accessibilityState;
 
+    const accessibilityValue = {
+      max:
+        this.props['aria-valuemax'] !== null
+          ? this.props['aria-valuemax']
+          : this.props.accessibilityValue?.max,
+      min:
+        this.props['aria-valuemin'] !== null
+          ? this.props['aria-valuemin']
+          : this.props.accessibilityValue?.min,
+      now:
+        this.props['aria-valuenow'] !== null
+          ? this.props['aria-valuenow']
+          : this.props.accessibilityValue?.now,
+      text:
+        this.props['aria-valuetext'] !== null
+          ? this.props['aria-valuetext']
+          : this.props.accessibilityValue?.text,
+    };
+
     return React.cloneElement(
       element,
       {
@@ -291,7 +310,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessibilityState: _accessibilityState,
         accessibilityActions: this.props.accessibilityActions,
         onAccessibilityAction: this.props.onAccessibilityAction,
-        accessibilityValue: this.props.accessibilityValue,
+        accessibilityValue: accessibilityValue,
         importantForAccessibility:
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'

Libraries/Components/Touchable/TouchableOpacity.js

@@ -235,6 +235,25 @@ class TouchableOpacity extends React.Component<Props, State> {
           }
         : _accessibilityState;
 
+    const accessibilityValue = {
+      max:
+        this.props['aria-valuemax'] !== null
+          ? this.props['aria-valuemax']
+          : this.props.accessibilityValue?.max,
+      min:
+        this.props['aria-valuemin'] !== null
+          ? this.props['aria-valuemin']
+          : this.props.accessibilityValue?.min,
+      now:
+        this.props['aria-valuenow'] !== null
+          ? this.props['aria-valuenow']
+          : this.props.accessibilityValue?.now,
+      text:
+        this.props['aria-valuetext'] !== null
+          ? this.props['aria-valuetext']
+          : this.props.accessibilityValue?.text,
+    };
+
     return (
       <Animated.View
         accessible={this.props.accessible !== false}
@@ -245,7 +264,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityState={_accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        accessibilityValue={this.props.accessibilityValue}
+        accessibilityValue={accessibilityValue}
         importantForAccessibility={
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -40,6 +40,10 @@ type Props = $ReadOnly<{|
   accessibilityRole?: ?AccessibilityRole,
   accessibilityState?: ?AccessibilityState,
   accessibilityValue?: ?AccessibilityValue,
+  'aria-valuemax'?: AccessibilityValue['max'],
+  'aria-valuemin'?: AccessibilityValue['min'],
+  'aria-valuenow'?: AccessibilityValue['now'],
+  'aria-valuetext'?: AccessibilityValue['text'],
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
   /**
@@ -89,6 +93,10 @@ const PASSTHROUGH_PROPS = [
   'accessibilityLiveRegion',
   'accessibilityRole',
   'accessibilityValue',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
   'accessibilityViewIsModal',
   'hitSlop',
   'nativeID',