fix(tre): do not set accessibilityLabel for images with presentation role

Author: jsamr

packages/transient-render-engine/src/flow/__tests__/translate.test.ts

@@ -1,3 +1,4 @@
+import { ReactNativePropsSwitch } from '../../helper-types';
 import HTMLModelRegistry from '../../model/HTMLModelRegistry';
 import { TStyles } from '../../styles/TStyles';
 import { TEmptyCtor } from '../../tree/TEmptyCtor';
@@ -107,6 +108,68 @@ describe('translateNode function', () => {
       expect(child.nodeIndex).toBe(i);
     });
   });
+  describe('regarding images accessiblity', () => {
+    it('should not provide accessibility to images with role="presentation"', () => {
+      const ttree = translateTreeTest(
+        '<img role="presentation" alt="foo" src="https://" />'
+      );
+      expect(ttree.getReactNativeProps()).toEqual<ReactNativePropsSwitch>({
+        text: {
+          accessibilityRole: 'none'
+        },
+        view: {
+          accessibilityRole: 'none'
+        }
+      });
+    });
+
+    it('should provide accessibility to images with role="image" and non-empty alt', () => {
+      const ttree = translateTreeTest(
+        '<img role="image" alt="foo" src="https://" />'
+      );
+      expect(ttree.getReactNativeProps()).toEqual<ReactNativePropsSwitch>({
+        text: {
+          accessibilityLabel: 'foo',
+          accessibilityRole: 'image'
+        },
+        view: {
+          accessibilityLabel: 'foo',
+          accessibilityRole: 'image'
+        }
+      });
+    });
+    it('should provide accessibility to images with role="image" and non-empty aria-label', () => {
+      const ttree = translateTreeTest(
+        '<img role="image" aria-label="foo" src="https://" />'
+      );
+      expect(ttree.getReactNativeProps()).toEqual<ReactNativePropsSwitch>({
+        text: {
+          accessibilityLabel: 'foo',
+          accessibilityRole: 'image'
+        },
+        view: {
+          accessibilityLabel: 'foo',
+          accessibilityRole: 'image'
+        }
+      });
+    });
+
+    it('should prefer aria-label over alt to generate an accessibilityLabel prop', () => {
+      const ttree = translateTreeTest(
+        '<img role="image" aria-label="foo" alt="bar" src="https://" />'
+      );
+      expect(ttree.getReactNativeProps()).toEqual<ReactNativePropsSwitch>({
+        text: {
+          accessibilityLabel: 'foo',
+          accessibilityRole: 'image'
+        },
+        view: {
+          accessibilityLabel: 'foo',
+          accessibilityRole: 'image'
+        }
+      });
+    });
+  });
   describe('regarding markers', () => {
     it('should set an anchor marker with <a> elements', () => {
       const ttree = translateTreeTest('<a href="hello">Yo!</a>');

packages/transient-render-engine/src/model/defaultHTMLElementModels.ts

@@ -556,10 +556,10 @@ const renderedEmbeddedModelMap: HTMLModelRecord<
     tagName: 'img',
     category: 'embedded',
     isVoid: true,
-    getReactNativeProps({ attributes }) {
+    getReactNativeProps({ attributes }, props) {
       // see https://w3c.github.io/html-aria/#el-img
       const label = attributes['aria-label'] || attributes.alt;
-      if (label) {
+      if (label && (!props?.view || props.view.accessibilityRole !== 'none')) {
         return {
           native: {
             accessibilityLabel: label,