From 5249da094b51e46b8bb24b99bfcc0c8d86d67373 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jsomsanith@talend.com>
Date: Thu, 13 Jun 2019 23:30:14 +0200
Subject: [PATCH] fix: Avatar accessibility

---
 src/components/Avatar.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index f588553c..460ed370 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -103,17 +103,24 @@ const Initial = styled.div`
  */
 export function Avatar({ loading, username, src, size, ...props }) {
   let avatarFigure = <Icon icon="useralt" />;
-
-  if (!loading) {
-    if (!src) {
-      avatarFigure = <Initial size={size}>{username.substring(0, 1)}</Initial>;
-    } else {
-      avatarFigure = <img src={src} alt={username} />;
-    }
+  const a11yProps = {};
+
+  if (loading) {
+    a11yProps['aria-busy'] = true;
+    a11yProps['aria-label'] = 'Loading avatar ...';
+  } else if (src) {
+    avatarFigure = <img src={src} alt={username} />;
+  } else {
+    a11yProps['aria-label'] = username;
+    avatarFigure = (
+      <Initial size={size} aria-hidden="true">
+        {username.substring(0, 1)}
+      </Initial>
+    );
   }
 
   return (
-    <Image size={size} loading={loading} src={src} {...props}>
+    <Image size={size} loading={loading} src={src} {...a11yProps} {...props}>
       {avatarFigure}
     </Image>
   );