Add more detailt alt tags for avatar images (LucasBassetti#273)

lib/ChatBot.jsx

@@ -62,6 +62,7 @@ class ChatBot extends Component {
     const {
       botDelay,
       botAvatar,
+      botName,
       cache,
       cacheName,
       customDelay,
@@ -71,7 +72,7 @@ class ChatBot extends Component {
     } = this.props;
     const chatSteps = {};
 
-    const defaultBotSettings = { delay: botDelay, avatar: botAvatar };
+    const defaultBotSettings = { delay: botDelay, avatar: botAvatar, botName };
     const defaultUserSettings = {
       delay: userDelay,
       avatar: userAvatar,
@@ -724,6 +725,7 @@ class ChatBot extends Component {
 ChatBot.propTypes = {
   avatarStyle: PropTypes.objectOf(PropTypes.any),
   botAvatar: PropTypes.string,
+  botName: PropTypes.string,
   botDelay: PropTypes.number,
   bubbleOptionStyle: PropTypes.objectOf(PropTypes.any),
   bubbleStyle: PropTypes.objectOf(PropTypes.any),
@@ -776,6 +778,7 @@ ChatBot.propTypes = {
 ChatBot.defaultProps = {
   avatarStyle: {},
   botDelay: 1000,
+  botName: 'The bot',
   bubbleOptionStyle: {},
   bubbleStyle: {},
   cache: false,

lib/steps_components/text/TextStep.jsx

@@ -61,10 +61,12 @@ class TextStep extends Component {
       hideUserAvatar
     } = this.props;
     const { loading } = this.state;
-    const { avatar, user } = step;
+    const { avatar, user, botName } = step;
 
     const showAvatar = user ? !hideUserAvatar : !hideBotAvatar;
 
+    const imageAltText = user ? "Your avatar" : `${botName}'s avatar`;
+
     return (
       <TextStepContainer className={`rsc-ts ${user ? 'rsc-ts-user' : 'rsc-ts-bot'}`} user={user}>
         <ImageContainer className="rsc-ts-image-container" user={user}>
@@ -75,7 +77,7 @@ class TextStep extends Component {
               showAvatar={showAvatar}
               user={user}
               src={avatar}
-              alt="avatar"
+              alt={imageAltText}
             />
           )}
         </ImageContainer>