[fix] improve Image accessibility

src/components/Image/__tests__/__snapshots__/index-test.js.snap

@@ -10,7 +10,14 @@ exports[`components/Image prop "accessibilityLabel" 1`] = `
 <div
   aria-label="accessibilityLabel"
   class="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-zIndex-1lgpqti"
-/>
+  style="background-image:url(\\"https://google.com/favicon.ico\\");"
+>
+  <img
+    alt="accessibilityLabel"
+    class="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
+    src="https://google.com/favicon.ico"
+  />
+</div>
 `;
 
 exports[`components/Image prop "accessible" 1`] = `
@@ -35,6 +42,7 @@ exports[`components/Image prop "defaultSource" does not override "height" and "w
   style="background-image:url(\\"https://google.com/favicon.ico\\");height:20px;width:40px;"
 >
   <img
+    alt=""
     class="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
     src="https://google.com/favicon.ico"
   />
@@ -47,6 +55,7 @@ exports[`components/Image prop "defaultSource" sets "height" and "width" styles
   style="background-image:url(\\"https://google.com/favicon.ico\\");height:10px;width:20px;"
 >
   <img
+    alt=""
     class="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
     src="https://google.com/favicon.ico"
   />
@@ -59,6 +68,7 @@ exports[`components/Image prop "defaultSource" sets background image when value
   style="background-image:url(\\"https://google.com/favicon.ico\\");"
 >
   <img
+    alt=""
     class="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
     src="https://google.com/favicon.ico"
   />
@@ -71,6 +81,7 @@ exports[`components/Image prop "defaultSource" sets background image when value
   style="background-image:url(\\"https://google.com/favicon.ico\\");"
 >
   <img
+    alt=""
     class="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
     src="https://google.com/favicon.ico"
   />

src/components/Image/__tests__/index-test.js

@@ -24,7 +24,10 @@ describe('components/Image', () => {
   });
 
   test('prop "accessibilityLabel"', () => {
-    const component = render(<Image accessibilityLabel="accessibilityLabel" />);
+    const defaultSource = { uri: 'https://google.com/favicon.ico' };
+    const component = render(
+      <Image accessibilityLabel="accessibilityLabel" defaultSource={defaultSource} />
+    );
     expect(component).toMatchSnapshot();
   });
 

src/components/Image/index.js

@@ -192,6 +192,7 @@ class Image extends Component {
     // Allows users to trigger the browser's image context menu
     const hiddenImage = displayImage
       ? createDOMElement('img', {
+          alt: accessibilityLabel || '',
           draggable,
           src: displayImage,
           style: [StyleSheet.absoluteFill, styles.img]