Repository: grommet/grommet (JavaScript)

Issue:
Image component - a11yLabel doesn't produce aria-label
<!--- Provide a general summary of the issue in the Title above -->
The Image component is meant to produce an aria-label when the a11yTitle prop is used. However, none is produced.
### Expected Behavior
Aria label should be produced in the HTML `img` element.
<!--- Tell us what should happen -->

### Actual Behavior
Aria label isn't produced.
<!--- Tell us what happens instead -->

### URL, screen shot, or Codepen exhibiting the issue
https://codesandbox.io/s/grommet-sandbox-6czt8
<!--
  -- Here's a Codesandbox template that serves as a nice starting point
  -- for demonstrating an issue: https://codesandbox.io/s/m7mml8l0zj
  -->

### Steps to Reproduce

1. Inspect the image in the codesandbox and you'll see there's an `aria-lable` produced b/c of the `aria-label` prop, but there's not `aria-label` for the `a11yTitle` prop.

### Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

- Grommet version: 2.4.0
- Browser Name and version: Firefox developer edition 75.0b12
- Operating System and version (desktop or mobile): OSx



Discussion:
Thanks for reporting, a PR is ready.



Patch:
diff --git a/src/js/components/Image/Image.js b/src/js/components/Image/Image.js
index 5c1e132a218..7f637927f1d 100644
--- a/src/js/components/Image/Image.js
+++ b/src/js/components/Image/Image.js
@@ -4,6 +4,7 @@ import { withForwardRef } from '../hocs';
 import { StyledImage } from './StyledImage';
 
 const Image = ({
+  a11yTitle,
   fallback,
   forwardRef,
   onError,
@@ -24,6 +25,7 @@ const Image = ({
   };
   return (
     <StyledImage
+      aria-label={a11yTitle}
       {...rest}
       {...extraProps}
       ref={forwardRef}


Test patch:
diff --git a/src/js/components/Image/__tests__/Image-test.js b/src/js/components/Image/__tests__/Image-test.js
index aadffc04ac3..462c11d89ee 100644
--- a/src/js/components/Image/__tests__/Image-test.js
+++ b/src/js/components/Image/__tests__/Image-test.js
@@ -19,6 +19,16 @@ test('Image renders', () => {
   expect(tree).toMatchSnapshot();
 });
 
+test('Image renders with aria-label', () => {
+  const component = renderer.create(
+    <Grommet>
+      <Image a11yTitle="aria-label-text" src={SRC} />
+    </Grommet>,
+  );
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 test('Image fit renders', () => {
   const component = renderer.create(
     <Grommet>
diff --git a/src/js/components/Image/__tests__/__snapshots__/Image-test.js.snap b/src/js/components/Image/__tests__/__snapshots__/Image-test.js.snap
index d96a6342069..2613363595e 100644
--- a/src/js/components/Image/__tests__/__snapshots__/Image-test.js.snap
+++ b/src/js/components/Image/__tests__/__snapshots__/Image-test.js.snap
@@ -253,3 +253,25 @@ exports[`Image renders 1`] = `
   />
 </div>
 `;
+
+exports[`Image renders with aria-label 1`] = `
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+<div
+  className="c0"
+>
+  <img
+    aria-label="aria-label-text"
+    className=""
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAAA1JREFUCB1jYGBg+A8AAQQBAB5znEAAAAAASUVORK5CYII="
+  />
+</div>
+`;