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,
 
@@ -240,6 +244,13 @@ function Pressable(props: Props, forwardedRef): React.Node {
   _accessibilityState =
     disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
 
+  const accessibilityValue = {
+    max: props['aria-valuemax'] ?? props.accessibilityValue?.max,
+    min: props['aria-valuemin'] ?? props.accessibilityValue?.min,
+    now: props['aria-valuenow'] ?? props.accessibilityValue?.now,
+    text: props['aria-valuetext'] ?? props.accessibilityValue?.text,
+  };
+
   const accessibilityLiveRegion =
     ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
 
@@ -250,6 +261,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessibilityLiveRegion,
     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

@@ -146,6 +146,13 @@ class TouchableBounce extends React.Component<Props, State> {
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
     };
 
+    const accessibilityValue = {
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+    };
+
     return (
       <Animated.View
         style={[{transform: [{scale: this.state.scale}]}, this.props.style]}
@@ -157,7 +164,7 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityState={_accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
-        accessibilityValue={this.props.accessibilityValue}
+        accessibilityValue={accessibilityValue}
         accessibilityLiveRegion={accessibilityLiveRegion}
         importantForAccessibility={
           this.props['aria-hidden'] === true

Libraries/Components/Touchable/TouchableHighlight.js

@@ -290,10 +290,19 @@ class TouchableHighlight extends React.Component<Props, State> {
             disabled: this.props.disabled,
           }
         : this.props.accessibilityState;
+
+    const accessibilityValue = {
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+    };
+
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
         : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+
     return (
       <View
         accessible={this.props.accessible !== false}
@@ -302,7 +311,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,13 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           }
         : _accessibilityState;
 
+    const accessibilityValue = {
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+    };
+
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
@@ -296,7 +303,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,13 @@ class TouchableOpacity extends React.Component<Props, State> {
           }
         : _accessibilityState;
 
+    const accessibilityValue = {
+      max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+      min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+      now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+      text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+    };
+
     const accessibilityLiveRegion =
       this.props['aria-live'] === 'off'
         ? 'none'
@@ -250,7 +257,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,
   /**
@@ -91,6 +95,10 @@ const PASSTHROUGH_PROPS = [
   'accessibilityLiveRegion',
   'accessibilityRole',
   'accessibilityValue',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
   'accessibilityViewIsModal',
   'hitSlop',
   'importantForAccessibility',

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap

@@ -2,6 +2,14 @@
 
 exports[`TouchableHighlight renders correctly 1`] = `
 <View
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -26,6 +34,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
       "disabled": true,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -47,6 +63,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
       "disabled": true,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -68,6 +92,14 @@ exports[`TouchableHighlight with disabled state should disable button when acces
       "disabled": true,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -90,6 +122,14 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w
       "disabled": true,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -111,6 +151,14 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt
       "disabled": true,
     }
   }
+  accessibilityValue={
+    Object {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}