Fix accessible prop for Image (#2327)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please provide enough information so
that others can review your pull request. The four fields below are
mandatory. -->

<!-- This fork of react-native provides React Native for macOS for the
community. It also contains some changes that are required for usage
internal to Microsoft. We are working on reducing the diff between
Facebook's public version of react-native and our
microsoft/react-native-macos fork. Long term, we want this fork to only
contain macOS concerns and have the other iOS and Android concerns
contributed upstream.

If you are making a new change then one of the following should be done:
- Consider if it is possible to achieve the desired behavior without
making a change to microsoft/react-native-macos. Often a change can be
made in a layer above in facebook/react-native instead.
- Create a corresponding PR against
[facebook/react-native](https://github.com/facebook/react-native)
**Note:** Ideally you would wait for Facebook feedback before submitting
to Microsoft, since we want to ensure that this fork doesn't deviate
from upstream.
-->

## Summary:

Problem: Setting the accessible prop to false on RN Image does not
remove the image from the accessibility tree on macOS. This is because
the accessible prop is mapped to the accessibilityElement property but
is set on NSImageView which has no effect. Instead, the
accessibilityElement prop should be set on NSImageCell.

Solution: Add a way to retrieve NSImageCell from NSImageView and map
RN's accessible prop to the accessibilityElement property on it.

## Test Plan:

Added a toggle to the 'Accessibility' test example in ImageExamples.js
to test the value of the accessible prop. Hovered over the image with
Accessibility Inspector and verified that the image is not found when
accessible is false. Also verified by turning on VoiceOver and confirmed
the image did not get read when the accessible prop is false.

accessible prop is true:
<img width="1279" alt="Screenshot 2025-01-07 at 11 19 22 AM"
src="https://github.com/user-attachments/assets/5b5abe39-f671-4f63-8931-fb0b454ecb3a"
/>

accessible prop is false:
<img width="1277" alt="Screenshot 2025-01-07 at 11 20 29 AM"
src="https://github.com/user-attachments/assets/f5704a5f-1416-4559-89d1-b11d80b43b48"
/>

Author: ksiler

packages/react-native/Libraries/Image/RCTImageView.mm

@@ -629,6 +629,11 @@ - (RCTPlatformView *)reactAccessibilityElement
   return _imageView;
 }
 
+- (NSCell *)reactAccessibilityElementCell
+  {
+    return _imageView.cell;
+  }
+
 - (NSColor *)tintColor
 {
   return _imageView.tintColor;

packages/react-native/Libraries/Image/RCTImageViewManager.mm

@@ -30,6 +30,10 @@ - (RCTPlatformView *)view // [macOS]
   return [[RCTImageView alloc] initWithBridge:self.bridge];
 }
 
+#if TARGET_OS_OSX // [macOS
+// setting accessibilityElement on NSImageView has no effect, must be set on NSImageCell
+RCT_REMAP_VIEW_PROPERTY(accessible, reactAccessibilityElementCell.accessibilityElement, BOOL)
+#endif // macOS]
 RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(capInsets, UIEdgeInsets)
 RCT_REMAP_VIEW_PROPERTY(defaultSource, defaultImage, UIImage)

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -20,6 +20,7 @@ const {
   Image,
   ImageBackground,
   StyleSheet,
+  Switch, // [macOS]
   Text,
   View,
 } = require('react-native');
@@ -625,6 +626,21 @@ class VectorDrawableExample extends React.Component<
   }
 }
 
+// [macOS add switch to toggle the value of the accessible prop
+const AccessibilityExample = () => {
+  const [isAccessible, setIsAccessible] = React.useState(true);
+  return (
+    <>
+      <View style={styles.switch}>
+        <Text>Set acccessible:</Text>
+        <Switch value={isAccessible} onValueChange={setIsAccessible} />
+      </View>
+      <Image accessible={isAccessible} source={fullImage} style={styles.base} />
+    </>
+  );
+};
+// macOS]
+
 const fullImage: ImageSource = {
   uri: IMAGE2,
 };
@@ -850,6 +866,12 @@ const styles = StyleSheet.create({
     experimental_boxShadow: '80px 0px 10px 0px hotpink',
     transform: 'rotate(-15deg)',
   },
+  // [macOS
+  switch: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  // macOS]
 });
 
 exports.displayName = (undefined: ?string);
@@ -1527,14 +1549,16 @@ exports.examples = [
       );
     },
   },
+  // [macOS
   {
     title: 'Accessibility',
     description:
-      ('If the `accessible` (boolean) prop is set to True, the image will be indicated as an accessbility element.': string),
+      ('If the `accessible` (boolean) prop is set to True, the image will be indicated as an accessbility element. If the `accessible` (boolean) prop is set to False, the image will not be indicated as an accessbility element.': string),
     render: function (): React.Node {
-      return <Image accessible source={fullImage} style={styles.base} />;
+      return <AccessibilityExample />;
     },
   },
+  // macOS]
   {
     title: 'Accessibility Label',
     description: