From 90d55ed964347cb2403b83930521fcc83db1d5c9 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jsomsanith@talend.com>
Date: Fri, 14 Jun 2019 22:21:47 +0200
Subject: [PATCH 1/2] fix: avatar list accessibility

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

diff --git a/src/components/AvatarList.js b/src/components/AvatarList.js
index 3bc32c52..8619ce4d 100644
--- a/src/components/AvatarList.js
+++ b/src/components/AvatarList.js
@@ -7,12 +7,12 @@ import WithTooltip from './tooltip/WithTooltip';
 import { TooltipNote } from './tooltip/TooltipNote';
 import { color, typography } from './shared/styles';
 
-const User = styled(Avatar)`
+const UserAvatar = styled(Avatar)`
   box-shadow: ${color.lightest} 0 0 0 2px;
   display: block;
 `;
 
-const UserWrapper = styled(WithTooltip)``;
+const UserTooltipWrapper = styled(WithTooltip)``;
 
 const UserEllipses = styled.div`
   font-size: ${typography.size.s1}px;
@@ -21,15 +21,20 @@ const UserEllipses = styled.div`
   white-space: nowrap;
 `;
 
-const Users = styled.div`
+const User = styled.li``;
+
+const Users = styled.ul`
   display: inline-flex;
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   vertical-align: top;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 
-  ${UserWrapper} {
+  ${User} {
     position: relative;
 
     &:not(:first-child) {
@@ -51,19 +56,22 @@ const Users = styled.div`
 export function AvatarList({ loading, users, userCount, size, ...props }) {
   const count = userCount || users.length;
   return (
-    <Users {...props}>
+    <Users aria-label="users" {...props}>
       {users.slice(0, 3).map(({ id, name, avatarUrl }) => (
-        <UserWrapper
-          key={id}
-          hasChrome={false}
-          placement="bottom"
-          mode="hover"
-          tooltip={<TooltipNote note={name} />}
-        >
-          <User size={size} username={name} src={avatarUrl} loading={loading} />
-        </UserWrapper>
+        <User key={id}>
+          <UserTooltipWrapper
+            hasChrome={false}
+            placement="bottom"
+            mode="hover"
+            tooltip={<TooltipNote note={name} />}
+          >
+            <UserAvatar size={size} username={name} src={avatarUrl} loading={loading} />
+          </UserTooltipWrapper>
+        </User>
       ))}
-      {count > 3 && <UserEllipses> &#43; {count - 3} </UserEllipses>}
+      {count > 3 && (
+        <UserEllipses aria-label={`${count - 3} more user(s)`}> &#43; {count - 3} </UserEllipses>
+      )}
     </Users>
   );
 }

From 4fa6303d7badec6efc904da41948b3afbf06476f Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <jsomsanith@talend.com>
Date: Fri, 14 Jun 2019 23:11:54 +0200
Subject: [PATCH 2/2] Remove extra space on li

---
 src/components/AvatarList.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AvatarList.js b/src/components/AvatarList.js
index 8619ce4d..ba19810d 100644
--- a/src/components/AvatarList.js
+++ b/src/components/AvatarList.js
@@ -21,7 +21,9 @@ const UserEllipses = styled.div`
   white-space: nowrap;
 `;
 
-const User = styled.li``;
+const User = styled.li`
+  display: inline-flex;
+`;
 
 const Users = styled.ul`
   display: inline-flex;