fix(ios): extract Image.ios.js props once (#57710)

Summary:
Two changes to `Image.ios.js` (follow up to #57633):

1. **Extract props once.** Per javache's review comment, props are destructured
once in the parameter list and written into a single `resolvedProps` object,
spread into `ImageViewNativeComponent` once — modelled on `View`, matching
`Image.android.js`. `ImageAnalyticsTagContext.Consumer` is replaced with
`use(ImageAnalyticsTagContext)`.

2. **Align `aria-*` vs `accessibilityState`.** `aria-*` state props now take
priority per key with fallback to `accessibilityState`, matching `View`, `Text`,
`TextInput`, `Pressable` and `Image.android.js`. `Image.ios.js` was the only
outlier, where the raw `accessibilityState` object replaced the merged one. Also
aligns the `alt` null-check with `Image.android.js` (`alt != null`), so an
explicit `alt={null}` no longer forces `accessible: true`.

Adds `Image-itest.js` coverage for the `aria-*` to `accessibilityState` mapping,
including `aria-checked` as `true`/`false`/`"mixed"`, precedence over the
matching `accessibilityState` field, and that `accessibilityState` is not emitted
when no state props are given.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[IOS] [FIXED] - Image: aria-* state props are no longer ignored when accessibilityState is also present

Pull Request resolved: #57710

Test Plan: Unchanged tests pass + added new tests

Reviewed By: christophpurrer

Differential Revision: D114048967

Pulled By: javache

fbshipit-source-id: c09647dba932cb747ecab6392e281009e85b8d3f

Author: mdjastrzebski

packages/react-native/Libraries/Image/Image.android.js

@@ -139,7 +139,6 @@ const EMPTY_IMAGE_SOURCE = {
 let BaseImage: AbstractImageAndroid = ({
   ref: forwardedRef,
   alt,
-  accessible,
   'aria-labelledby': ariaLabelledBy,
   'aria-busy': ariaBusy,
   'aria-checked': ariaChecked,
@@ -148,8 +147,6 @@ let BaseImage: AbstractImageAndroid = ({
   'aria-hidden': ariaHidden,
   'aria-label': ariaLabel,
   'aria-selected': ariaSelected,
-  accessibilityLabel,
-  accessibilityLabelledBy,
   accessibilityState,
   defaultSource,
   loadingIndicatorSource,
@@ -172,7 +169,7 @@ let BaseImage: AbstractImageAndroid = ({
   ref?: React.RefSetter<ImageInstance>,
   ...ImageProps,
 }) => {
-  let source_ =
+  let resolvedSource =
     getImageSourcesFromImageProps({
       crossOrigin,
       referrerPolicy,
@@ -201,29 +198,29 @@ let BaseImage: AbstractImageAndroid = ({
     ...React.PropsOf<ImageViewNativeComponent>,
   };
 
-  if (Array.isArray(source_)) {
+  if (Array.isArray(resolvedSource)) {
     const {
       headers: sourceHeaders,
       width: sourceWidth,
       height: sourceHeight,
-    } = source_[0];
+    } = resolvedSource[0];
     if (sourceHeaders != null) {
       nativeProps.headers = sourceHeaders;
     }
     // Default to the first source's width and height if only one is provided
     nativeProps.style = [
-      source_.length === 1 && {width: sourceWidth, height: sourceHeight},
+      resolvedSource.length === 1 && {width: sourceWidth, height: sourceHeight},
       styles.base,
       style,
     ];
-    nativeProps.source = source_;
+    nativeProps.source = resolvedSource;
   } else {
     const {
       uri,
       width: sourceWidth,
       height: sourceHeight,
       headers: sourceHeaders,
-    } = source_;
+    } = resolvedSource;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
@@ -235,7 +232,7 @@ let BaseImage: AbstractImageAndroid = ({
       styles.base,
       style,
     ];
-    nativeProps.source = [source_];
+    nativeProps.source = [resolvedSource];
   }
 
   if (onLoadStart != null) {
@@ -266,24 +263,19 @@ let BaseImage: AbstractImageAndroid = ({
     nativeProps.loadingIndicatorSrc = loadingIndicatorSource_.uri;
   }
 
+  // Maintain pre-existing order, accessibilityLabel takes priority over alt
   if (ariaLabel != null) {
     nativeProps.accessibilityLabel = ariaLabel;
-  } else if (accessibilityLabel != null) {
-    nativeProps.accessibilityLabel = accessibilityLabel;
-  } else if (alt != null) {
+  } else if (alt != null && nativeProps.accessibilityLabel == null) {
     nativeProps.accessibilityLabel = alt;
   }
 
   if (ariaLabelledBy != null) {
     nativeProps.accessibilityLabelledBy = ariaLabelledBy;
-  } else if (accessibilityLabelledBy != null) {
-    nativeProps.accessibilityLabelledBy = accessibilityLabelledBy;
   }
 
   if (alt != null) {
     nativeProps.accessible = true;
-  } else if (accessible != null) {
-    nativeProps.accessible = accessible;
   }
 
   if (

packages/react-native/Libraries/Image/Image.ios.js

@@ -29,6 +29,7 @@ import ImageViewNativeComponent from './ImageViewNativeComponent';
 import NativeImageLoaderIOS from './NativeImageLoaderIOS';
 import resolveAssetSource from './resolveAssetSource';
 import * as React from 'react';
+import {use} from 'react';
 
 export type ImageInstance = HostInstance;
 
@@ -102,6 +103,12 @@ async function queryCache(
   return NativeImageLoaderIOS.queryCache(urls);
 }
 
+const EMPTY_IMAGE_SOURCE = {
+  uri: undefined,
+  width: undefined,
+  height: undefined,
+};
+
 /**
  * A React component for displaying different types of images,
  * including network images, static resources, temporary local images, and
@@ -111,90 +118,127 @@ async function queryCache(
  */
 let BaseImage: AbstractImageIOS = ({
   ref: forwardedRef,
-  ...props
+  'aria-labelledby': ariaLabelledBy,
+  'aria-busy': ariaBusy,
+  'aria-checked': ariaChecked,
+  'aria-disabled': ariaDisabled,
+  'aria-expanded': ariaExpanded,
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  'aria-selected': ariaSelected,
+  accessibilityState,
+  alt,
+  children,
+  crossOrigin,
+  height,
+  referrerPolicy,
+  resizeMode,
+  source,
+  src,
+  srcSet,
+  style,
+  tintColor,
+  width,
+  ...restProps
 }: {
   ref?: React.RefSetter<ImageInstance>,
   ...ImageProps,
 }) => {
-  const source = getImageSourcesFromImageProps(props) || {
-    uri: undefined,
-    width: undefined,
-    height: undefined,
+  const nativeProps = restProps as {
+    ...React.PropsOf<ImageViewNativeComponent>,
   };
 
-  let style: ImageStyleProp;
+  const resolvedSource =
+    getImageSourcesFromImageProps({
+      crossOrigin,
+      height,
+      referrerPolicy,
+      source,
+      src,
+      srcSet,
+      width,
+    }) || EMPTY_IMAGE_SOURCE;
+
+  let resolvedStyle: ImageStyleProp;
   let sources;
-  if (Array.isArray(source)) {
-    style = [styles.base, props.style];
-    sources = source;
+  if (Array.isArray(resolvedSource)) {
+    resolvedStyle = [styles.base, style];
+    sources = resolvedSource;
   } else {
-    const {uri} = source;
+    const {uri} = resolvedSource;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style = [{width, height}, styles.base, props.style];
-    sources = [source];
+    resolvedStyle = [
+      {
+        width: resolvedSource.width ?? width,
+        height: resolvedSource.height ?? height,
+      },
+      styles.base,
+      style,
+    ];
+    sources = [resolvedSource];
   }
 
-  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
-  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
-  const resizeMode =
-    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
-
-  if (props.children != null) {
+  if (children != null) {
     throw new Error(
       'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
     );
   }
-  const {
-    'aria-busy': ariaBusy,
-    'aria-checked': ariaChecked,
-    'aria-disabled': ariaDisabled,
-    'aria-expanded': ariaExpanded,
-    'aria-selected': ariaSelected,
-    'aria-hidden': ariaHidden,
-    src,
-    ...restProps
-  } = props;
-
-  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,
-  };
 
-  // In order for `aria-hidden` to work on iOS we must set `accessible` to false (`accessibilityElementsHidden` is not enough).
-  const accessible =
-    ariaHidden !== true && (props.alt !== undefined ? true : props.accessible);
-  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
+  nativeProps.style = resolvedStyle;
+  nativeProps.source = sources;
+
+  const flattenedStyle = flattenStyle<ImageStyleProp>(resolvedStyle);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
+  nativeProps.resizeMode =
+    objectFit || resizeMode || flattenedStyle?.resizeMode || 'cover';
+  nativeProps.tintColor = tintColor ?? flattenedStyle?.tintColor;
+
+  // Maintain pre-existing order, accessibilityLabel takes priority over alt
+  if (ariaLabel != null) {
+    nativeProps.accessibilityLabel = ariaLabel;
+  } else if (alt != null && nativeProps.accessibilityLabel == null) {
+    nativeProps.accessibilityLabel = alt;
+  }
+
+  if (ariaLabelledBy != null) {
+    nativeProps.accessibilityLabelledBy = ariaLabelledBy;
+  }
+
+  if (ariaHidden === true) {
+    // In order for `aria-hidden` to work on iOS we must set `accessible` to
+    // false (`accessibilityElementsHidden` is not enough).
+    nativeProps.accessible = false;
+  } else if (alt != null) {
+    nativeProps.accessible = true;
+  }
+
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    nativeProps.accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
 
   const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 
-  return (
-    <ImageAnalyticsTagContext.Consumer>
-      {analyticTag => {
-        return (
-          <ImageViewNativeComponent
-            accessibilityState={_accessibilityState}
-            {...restProps}
-            accessible={accessible}
-            accessibilityLabel={accessibilityLabel ?? props.alt}
-            ref={actualRef}
-            style={style}
-            resizeMode={resizeMode}
-            tintColor={tintColor}
-            source={sources}
-            internal_analyticTag={analyticTag}
-          />
-        );
-      }}
-    </ImageAnalyticsTagContext.Consumer>
-  );
+  const analyticTag = use(ImageAnalyticsTagContext);
+  if (analyticTag != null) {
+    nativeProps.internal_analyticTag = analyticTag;
+  }
+
+  return <ImageViewNativeComponent {...nativeProps} ref={actualRef} />;
 };
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();

packages/react-native/Libraries/Image/__tests__/Image-itest.js

@@ -648,6 +648,88 @@ describe('<Image>', () => {
       });
     });
 
+    describe('accessibilityState', () => {
+      function getAccessibilityState(element: React.MixedElement) {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(element);
+        });
+
+        return root
+          .getRenderedOutput({props: ['accessibilityState']})
+          .toJSONObject().props.accessibilityState;
+      }
+
+      it('is not set when no state props are provided', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Image />);
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['accessibilityState']}).toJSX(),
+        ).toEqual(<rn-image />);
+      });
+
+      it('maps \'aria-busy\' to "busy"', () => {
+        expect(getAccessibilityState(<Image aria-busy={true} />)).toContain(
+          'busy:true',
+        );
+      });
+
+      it('maps \'aria-disabled\' to "disabled"', () => {
+        expect(getAccessibilityState(<Image aria-disabled={true} />)).toContain(
+          'disabled:true',
+        );
+      });
+
+      it('maps \'aria-expanded\' to "expanded"', () => {
+        expect(getAccessibilityState(<Image aria-expanded={true} />)).toContain(
+          'expanded:true',
+        );
+      });
+
+      it('maps \'aria-selected\' to "selected"', () => {
+        expect(getAccessibilityState(<Image aria-selected={true} />)).toContain(
+          'selected:true',
+        );
+      });
+
+      describe('maps \'aria-checked\' to "checked"', () => {
+        it('when set to true', () => {
+          expect(
+            getAccessibilityState(<Image aria-checked={true} />),
+          ).toContain('checked:Checked');
+        });
+
+        it('when set to false', () => {
+          expect(
+            getAccessibilityState(<Image aria-checked={false} />),
+          ).toContain('checked:Unchecked');
+        });
+
+        it("when set to 'mixed'", () => {
+          expect(
+            getAccessibilityState(<Image aria-checked="mixed" />),
+          ).toContain('checked:Mixed');
+        });
+      });
+
+      it('gives `aria-*` precedence over the matching field', () => {
+        const accessibilityState = getAccessibilityState(
+          <Image
+            accessibilityState={{busy: false, disabled: true}}
+            aria-busy={true}
+          />,
+        );
+
+        expect(accessibilityState).toContain('busy:true');
+        expect(accessibilityState).toContain('disabled:true');
+      });
+    });
+
     component TestComponent(testID?: ?string, ...props: AccessibilityProps) {
       return <Image {...props} testID={testID} source={LOGO_SOURCE} />;
     }