From 3859c464ff0bc792b65f362167c4294c75a393ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Zapata?= <fzberlinches@gmail.com>
Date: Mon, 16 Jan 2017 21:51:53 +0100
Subject: [PATCH] feat(a11y): add alt attribute to set alternative text for the
 icon or image (#1102)

---
 components/avatar/Avatar.js | 10 ++++++----
 components/avatar/readme.md |  1 +
 spec/components/avatar.js   |  9 +++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/avatar/Avatar.js b/components/avatar/Avatar.js
index 9023663b..7579b35a 100644
--- a/components/avatar/Avatar.js
+++ b/components/avatar/Avatar.js
@@ -5,17 +5,18 @@ import { AVATAR } from '../identifiers.js';
 import InjectFontIcon from '../font_icon/FontIcon.js';
 
 const factory = (FontIcon) => {
-  const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
+  const Avatar = ({alt, children, className, cover, icon, image, theme, title, ...other}) => (
     <div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
       {children}
-      {cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
-      {!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
-      {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
+      {cover && typeof image === 'string' && <span aria-label={alt} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
+      {!cover && (typeof image === 'string' ? <img alt={alt} className={theme.image} src={image} /> : image)}
+      {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} alt={alt} /> : icon}
       {title ? <span className={theme.letter}>{title[0]}</span> : null}
     </div>
   );
 
   Avatar.propTypes = {
+    alt: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     cover: PropTypes.bool,
@@ -30,6 +31,7 @@ const factory = (FontIcon) => {
   };
 
   Avatar.defaultProps = {
+    alt: '',
     cover: false
   };
 
diff --git a/components/avatar/readme.md b/components/avatar/readme.md
index ff90fdd9..b8b27e77 100644
--- a/components/avatar/readme.md
+++ b/components/avatar/readme.md
@@ -30,6 +30,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
 
 | Name          | Type                    | Default     | Description|
 |:-----|:-----|:-----|:-----|
+| `alt`    | `String`                  |     `''`        | An alternative text for the image or icon.|
 | `children`    | `Node`                  |             | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
 | `className`   | `String`                | `''`        | Set a class to style the Component.|
 | `cover`       | `Boolean`               | `''`        | Set to true if your image is not squared so it will be used as a cover for the element.|
diff --git a/spec/components/avatar.js b/spec/components/avatar.js
index 8255435c..7fa47020 100644
--- a/spec/components/avatar.js
+++ b/spec/components/avatar.js
@@ -6,11 +6,12 @@ const AvatarTest = () => (
   <section>
     <h5>Avatars</h5>
     <p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
-    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
+    <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" alt="icon folder" />
     <Avatar icon={<GithubIcon />}/>
-    <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
-    <Avatar image="https://placeimg.com/80/80/animals" />
-    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
+    <Avatar><img src="https://placeimg.com/80/80/animals" alt="foobar"/></Avatar>
+    <Avatar image="https://placeimg.com/80/80/animals" alt="foobar" />
+    <Avatar alt="foobar"
+    image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
     <Avatar title="Javier"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </section>