Merge pull request #12 from jsomsanith/jsomsanith/fix/avatar_a11y

fix: Avatar accessibility
storybookjs · Jun 13, 2019 · c4341e8 · c4341e8
2 parents 86e8db1 + 5249da0
commit c4341e8
Showing 1 changed file with 15 additions and 8 deletions.
diff --git 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>
   );