Feat/accessibility state alias

Libraries/Components/Pressable/Pressable.js

@@ -52,6 +52,17 @@ type Props = $ReadOnly<{|
   accessibilityValue?: ?AccessibilityValue,
   accessibilityViewIsModal?: ?boolean,
   accessible?: ?boolean,
+
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean,
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
   focusable?: ?boolean,
   importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
@@ -174,9 +185,15 @@ type Props = $ReadOnly<{|
  * LTI update could not be added via codemod */
 function Pressable(props: Props, forwardedRef): React.Node {
   const {
-    accessible,
+    accessibilityState,
     android_disableSound,
     android_ripple,
+    accessible,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
     cancelable,
     children,
     delayHoverIn,
@@ -205,20 +222,42 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
 
-  const accessibilityState =
-    disabled != null
-      ? {...props.accessibilityState, disabled}
-      : props.accessibilityState;
+  let _accessibilityState = {
+    busy: ariaBusy ?? accessibilityState?.busy,
+    checked: ariaChecked ?? accessibilityState?.checked,
+    disabled: ariaDisabled ?? accessibilityState?.disabled,
+    expanded: ariaExpanded ?? accessibilityState?.expanded,
+    selected: ariaSelected ?? accessibilityState?.selected,
+  };
+
+  /**
+   * Removing undefined keys from _accessibilityState
+   */
+
+  Object.keys(_accessibilityState).forEach(key => {
+    if (_accessibilityState[key] === undefined) {
+      delete _accessibilityState[key];
+    }
+  });
 
-  const restPropsWithDefaults: React.ElementConfig<typeof View> = {
+  _accessibilityState =
+    disabled != null ? {..._accessibilityState, disabled} : _accessibilityState;
+
+  let restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
     accessible: accessible !== false,
-    accessibilityState,
     focusable: focusable !== false,
     hitSlop,
   };
 
+  if (Object.keys(_accessibilityState).length !== 0) {
+    restPropsWithDefaults = {
+      ...restPropsWithDefaults,
+      accessibilityState: _accessibilityState,
+    };
+  }
+
   const config = useMemo(
     () => ({
       cancelable,

Libraries/Components/View/View.js

@@ -28,11 +28,47 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef(
   ({tabIndex, focusable, ...otherProps}: ViewProps, forwardedRef) => {
+    const {
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-selected': ariaSelected,
+      ...restProps
+    } = otherProps;
+
+    const _accessibilityState = {
+      busy: ariaBusy ?? otherProps.accessibilityState?.busy,
+      checked: ariaChecked ?? otherProps.accessibilityState?.checked,
+      disabled: ariaDisabled ?? otherProps.accessibilityState?.disabled,
+      expanded: ariaExpanded ?? otherProps.accessibilityState?.expanded,
+      selected: ariaSelected ?? otherProps.accessibilityState?.selected,
+    };
+
+    /**
+     * Removing undefined keys from _accessibilityState
+     */
+
+    Object.keys(_accessibilityState).forEach(key => {
+      if (_accessibilityState[key] === undefined) {
+        delete _accessibilityState[key];
+      }
+    });
+
+    let restWithDefaultProps = {...restProps};
+
+    if (Object.keys(_accessibilityState).length !== 0) {
+      restWithDefaultProps = {
+        ...restWithDefaultProps,
+        accessibilityState: _accessibilityState,
+      };
+    }
+
     return (
       <TextAncestor.Provider value={false}>
         <ViewNativeComponent
           focusable={tabIndex !== undefined ? !tabIndex : focusable}
-          {...otherProps}
+          {...restWithDefaultProps}
           ref={forwardedRef}
         />
       </TextAncestor.Provider>

Libraries/Components/View/ViewPropTypes.js

@@ -485,6 +485,17 @@ export type ViewProps = $ReadOnly<{|
    */
   accessibilityLabelledBy?: ?string | ?Array<string>,
 
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean,
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
+
   /**
    * Views that are only used to layout their children or otherwise don't draw
    * anything may be automatically removed from the native hierarchy as an

Libraries/Text/Text.js

@@ -33,6 +33,11 @@ const Text: React.AbstractComponent<
   const {
     accessible,
     allowFontScaling,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
     ellipsizeMode,
     onLongPress,
     onPress,
@@ -51,14 +56,33 @@ const Text: React.AbstractComponent<
 
   const [isHighlighted, setHighlighted] = useState(false);
 
+  const _accessibilityState = {
+    busy: ariaBusy ?? props.accessibilityState?.busy,
+    checked: ariaChecked ?? props.accessibilityState?.checked,
+    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
+    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
+    selected: ariaSelected ?? props.accessibilityState?.selected,
+  };
+
+  /**
+   * Removing undefined keys from _accessibilityState
+   */
+
+  Object.keys(_accessibilityState).forEach(key => {
+    if (_accessibilityState[key] === undefined) {
+      delete _accessibilityState[key];
+    }
+  });
+
   const _disabled =
     restProps.disabled != null
       ? restProps.disabled
-      : props.accessibilityState?.disabled;
-  const _accessibilityState =
-    _disabled !== props.accessibilityState?.disabled
-      ? {...props.accessibilityState, disabled: _disabled}
-      : props.accessibilityState;
+      : _accessibilityState?.disabled;
+
+  const nativeTextAccessibilityState =
+    _disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled: _disabled}
+      : _accessibilityState;
 
   const isPressable =
     (onPress != null ||
@@ -176,9 +200,15 @@ const Text: React.AbstractComponent<
     default: accessible,
   });
 
+  let restWithDefaultProps = {...restProps};
+
+  if (Object.keys(_accessibilityState).length !== 0) {
+    restWithDefaultProps.accessibilityState = _accessibilityState;
+  }
+
   return hasTextAncestor ? (
     <NativeVirtualText
-      {...restProps}
+      {...restWithDefaultProps}
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={isPressable}
@@ -190,11 +220,11 @@ const Text: React.AbstractComponent<
   ) : (
     <TextAncestor.Provider value={true}>
       <NativeText
-        {...restProps}
+        {...restWithDefaultProps}
         {...eventHandlersForText}
         disabled={_disabled}
         accessible={_accessible}
-        accessibilityState={_accessibilityState}
+        accessibilityState={nativeTextAccessibilityState}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}

Libraries/Text/TextProps.js

@@ -77,6 +77,17 @@ export type TextProps = $ReadOnly<{|
    *
    */
   android_hyphenationFrequency?: ?('normal' | 'none' | 'full'),
+
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean,
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
   children?: ?Node,
 
   /**