feat(a11y): automatically set accessible prop with role prop (#57633)

Summary:
Setting `role` prop (except `none`/`presentation`) automatically sets `accessible` prop on `View` and `Image`.  This aligns web behavior when setting `role` attribute is enough to add the element into accessibility tree.

This aligns also with `Image` `alt` web-compat prop which also enables `accessible` when set.

The change skips `Text`, `TextInput`, etc as they are implicitly members of accessibility tree by default.

This change also intentionally skips `accessibilityRole` as legacy, non-web version.

This also helps when using React Strict DOM, as it exposes `role` prop, but does not expose `accessible` prop, hence setting `role` on `h.div` basically has no effect. I think this changes is better suited for RN repo though.

## 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
-->

[GENERAL] [CHANGED] Automatically set `acessible` prop when `role` prop is set (except `none`/`presenation`)

Pull Request resolved: #57633

Test Plan: Added relevant Fantom tests.

Reviewed By: andrewdacenko

Differential Revision: D113754156

Pulled By: javache

fbshipit-source-id: 4805b92d026d21e8a40b69fcb02f75e55254a996

Author: mdjastrzebski

packages/react-native/Libraries/Components/View/View.js

@@ -83,6 +83,16 @@ component View(ref?: React.RefSetter<ViewInstance>, ...props: ViewProps) {
     resolvedProps.focusable = !tabIndex;
   }
 
+  // For web compatibility, a `role` implicitly makes the element accessible.
+  if (
+    resolvedProps.accessible == null &&
+    resolvedProps.role != null &&
+    resolvedProps.role !== 'none' &&
+    resolvedProps.role !== 'presentation'
+  ) {
+    resolvedProps.accessible = true;
+  }
+
   if (
     accessibilityState != null ||
     ariaBusy != null ||

packages/react-native/Libraries/Components/View/__tests__/View-itest.js

@@ -643,6 +643,59 @@ describe('<View>', () => {
           ).toEqual(null);
         });
       });
+      describe('role', () => {
+        it('implicitly makes the view accessible', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View role="button" />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessible']}).toJSX(),
+          ).toEqual(<rn-view accessible="true" />);
+        });
+
+        it('does not make the view accessible for the "none" role', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View role="none" collapsable={false} />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessible']}).toJSX(),
+          ).toEqual(<rn-view />);
+        });
+
+        it('does not make the view accessible for the "presentation" role', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View role="presentation" collapsable={false} />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessible']}).toJSX(),
+          ).toEqual(<rn-view />);
+        });
+
+        it('does not override an explicit "accessible" prop', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <View role="button" accessible={false} collapsable={false} />,
+            );
+          });
+
+          // `accessible={false}` is not propagated to the mounting layer (it is
+          // the default), so the implicit `role` behavior must not force it on.
+          expect(
+            root.getRenderedOutput({props: ['accessible']}).toJSX(),
+          ).toEqual(<rn-view />);
+        });
+      });
       describe('aria-label', () => {
         it('is mapped to accessibilityLabel', () => {
           const root = Fantom.createRoot();

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

@@ -284,6 +284,13 @@ let BaseImage: AbstractImageAndroid = ({
     nativeProps.accessible = true;
   } else if (accessible != null) {
     nativeProps.accessible = accessible;
+  } else if (
+    // For web compatibility, a `role` implicitly makes the element accessible.
+    nativeProps.role != null &&
+    nativeProps.role !== 'none' &&
+    nativeProps.role !== 'presentation'
+  ) {
+    nativeProps.accessible = true;
   }
 
   if (

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

@@ -168,9 +168,23 @@ let BaseImage: AbstractImageIOS = ({
     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);
+  let accessible;
+  if (ariaHidden === true) {
+    // In order for `aria-hidden` to work on iOS we must set `accessible` to
+    // false (`accessibilityElementsHidden` is not enough).
+    accessible = false;
+  } else if (props.alt !== undefined) {
+    accessible = true;
+  } else if (props.accessible != null) {
+    accessible = props.accessible;
+  } else if (
+    // For web compatibility, a `role` implicitly makes the element accessible.
+    props.role != null &&
+    props.role !== 'none' &&
+    props.role !== 'presentation'
+  ) {
+    accessible = true;
+  }
   const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);

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

@@ -648,6 +648,52 @@ describe('<Image>', () => {
       });
     });
 
+    describe('role', () => {
+      it('implicitly marks the image accessible', () => {
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(<Image role="button" source={LOGO_SOURCE} />);
+        });
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-image accessible="true" />,
+        );
+      });
+
+      it('does not mark the image accessible for the "none" role', () => {
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(<Image role="none" source={LOGO_SOURCE} />);
+        });
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-image />,
+        );
+      });
+
+      it('does not mark the image accessible for the "presentation" role', () => {
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(<Image role="presentation" source={LOGO_SOURCE} />);
+        });
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-image />,
+        );
+      });
+
+      it('does not override an explicit "accessible" prop', () => {
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(
+            <Image role="button" accessible={false} source={LOGO_SOURCE} />,
+          );
+        });
+        // `accessible={false}` is not propagated to the mounting layer (it is
+        // the default), so the implicit `role` behavior must not force it on.
+        expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual(
+          <rn-image />,
+        );
+      });
+    });
+
     component TestComponent(testID?: ?string, ...props: AccessibilityProps) {
       return <Image {...props} testID={testID} source={LOGO_SOURCE} />;
     }