feat: Add alt prop to Image component (#34550)

Summary:
This adds the `alt` prop to the `Image` component as requested on #34424. Using this new `alt` prop enables the `accessibility` prop and passes down the alt text to `accessibilityLabel`. This PR also updates RNTester ImageExample in order to facilitate the manual QA.

#### Open questions
 - ~~On web `alt` text is displayed on the page if the image can't be loaded for some reason, should we implement this same behavior if the `Image` component fails to load `source`?~~ Not for now

## Changelog

[General] [Added] - Add alt prop to Image component

Pull Request resolved: #34550

Test Plan:
1. Open the RNTester app and navigate to the Image page
2. Test the `alt` prop through the `Accessibility Label via alt prop` section, this can be tested either by enabling Voice Over if you're using a real device or through the Accessibility Inspector if you're using a simulator

https://user-images.githubusercontent.com/11707729/187790249-0d851363-c30e-41b6-8c24-73e72467f4ba.mov

Reviewed By: lunaleaps

Differential Revision: D39618453

Pulled By: cipolleschi

fbshipit-source-id: 0e26b2574514e76ce7e98ddb578f587a9cc30ee9

Libraries/Image/Image.android.js

@@ -181,7 +181,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
       ? loadingIndicatorSource.uri
       : null,
     ref: forwardedRef,
-    accessibilityLabel: props['aria-label'] ?? props.accessibilityLabel,
+    accessible: props.alt !== undefined ? true : props.accessible,
+    accessibilityLabel:
+      props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
     accessibilityState: {
       busy: props['aria-busy'] ?? props.accessibilityState?.busy,
       checked: props['aria-checked'] ?? props.accessibilityState?.checked,

Libraries/Image/Image.d.ts

@@ -245,6 +245,14 @@ export interface ImagePropsBase
    * A static image to display while downloading the final image off the network.
    */
   defaultSource?: ImageURISource | number | undefined;
+
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: string | undefined;
 }
 
 export interface ImageProps extends ImagePropsBase {

Libraries/Image/Image.ios.js

@@ -173,7 +173,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
           <ImageViewNativeComponent
             accessibilityState={_accessibilityState}
             {...restProps}
-            accessibilityLabel={accessibilityLabel}
+            accessible={props.alt !== undefined ? true : props.accessible}
+            accessibilityLabel={accessibilityLabel ?? props.alt}
             ref={forwardedRef}
             style={style}
             resizeMode={resizeMode}

Libraries/Image/ImageProps.js

@@ -21,7 +21,6 @@ import type {
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {Node, Ref} from 'react';
 import typeof Image from './Image';
-import type {DimensionValue} from '../StyleSheet/StyleSheetTypes';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -93,6 +92,14 @@ export type ImageProps = {|
    */
   'aria-label'?: ?Stringish,
 
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: ?Stringish,
+
   /**
    * blurRadius: the blur radius of the blur filter added to the image
    *