feat: automatically set accessible when setting role prop

Author: mdjastrzebski

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

@@ -83,6 +83,18 @@ component View(ref?: React.RefSetter<ViewInstance>, ...props: ViewProps) {
     resolvedProps.focusable = !tabIndex;
   }
 
+  // For web compatibility, setting a `role` implicitly makes the element
+  // accessible, unless the role is `none`/`presentation` (which explicitly
+  // removes semantics) or `accessible` was set explicitly.
+  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,14 @@ let BaseImage: AbstractImageAndroid = ({
     nativeProps.accessible = true;
   } else if (accessible != null) {
     nativeProps.accessible = accessible;
+  } else if (
+    // For web compatibility, setting a `role` implicitly makes the element
+    // accessible, unless the role is `none`/`presentation`.
+    nativeProps.role != null &&
+    nativeProps.role !== 'none' &&
+    nativeProps.role !== 'presentation'
+  ) {
+    nativeProps.accessible = true;
   }
 
   if (

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

@@ -168,9 +168,24 @@ 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, setting a `role` implicitly makes the element
+    // accessible, unless the role is `none`/`presentation`.
+    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} />;
     }