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}) => (
{children}
- {cover && typeof image === 'string' &&
}
- {!cover && (typeof image === 'string' ?
![{title} {title}]({image})
: image)}
- {typeof icon === 'string' ?
: icon}
+ {cover && typeof image === 'string' &&
}
+ {!cover && (typeof image === 'string' ?
![{alt}]({image})
: image)}
+ {typeof icon === 'string' ?
: icon}
{title ?
{title[0]} : null}
);
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 = () => (
Avatars
Provide an image source or object, a font icon, children or a title to use its first letter.
-
+
}/>
-
-
-
+
+
+