From 8a3db090d5daa13cef7590c944eb31efb071abb0 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Wed, 20 Apr 2022 16:08:15 +0200
Subject: [PATCH] fix: improve avatar alt text (#892)

* fix: improve avatar alt text

* refactor: fix unknown avatar path on localhost
---
 .../assets/icons/unknownUser.png}                   | Bin
 .../UsersList/ChangePassword/ChangePassword.tsx     |   2 +-
 .../admin/users/UsersList/DeleteUser/DeleteUser.tsx |   2 +-
 .../users/UsersList/UserListItem/UserListItem.tsx   |   2 +-
 .../ProjectAccessListItem/ProjectAccessListItem.tsx |   2 +-
 .../src/component/user/UserProfile/UserProfile.tsx  |   5 +++--
 .../UserProfileContent/UserProfileContent.tsx       |   2 +-
 7 files changed, 8 insertions(+), 7 deletions(-)
 rename frontend/{public/unknown-user.png => src/assets/icons/unknownUser.png} (100%)

diff --git a/frontend/public/unknown-user.png b/frontend/src/assets/icons/unknownUser.png
similarity index 100%
rename from frontend/public/unknown-user.png
rename to frontend/src/assets/icons/unknownUser.png
diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
index 3120a772aa..49a49861fb 100644
--- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
+++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
@@ -104,7 +104,7 @@ const ChangePassword = ({
                 <div className={commonStyles.flexRow}>
                     <Avatar
                         variant="rounded"
-                        alt={user.name}
+                        alt="Gravatar"
                         src={user.imageUrl}
                         title={`${
                             user.name || user.email || user.username
diff --git a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
index 87545a08bf..cad956fd50 100644
--- a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
+++ b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
@@ -53,7 +53,7 @@ const DeleteUser = ({
                 <div data-loading className={commonStyles.flexRow}>
                     <Avatar
                         variant="rounded"
-                        alt={user.name}
+                        alt="Gravatar"
                         src={user.imageUrl}
                         title={`${
                             user.name || user.email || user.username
diff --git a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
index ade828415d..b0c8c8f65d 100644
--- a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
+++ b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
@@ -50,7 +50,7 @@ const UserListItem = ({
             <TableCell align="center" className={styles.hideXS}>
                 <Avatar
                     data-loading
-                    alt={user.name}
+                    alt="Gravatar"
                     src={user.imageUrl}
                     className={styles.avatar}
                     title={`${user.name || user.email || user.username} (id: ${
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
index 56c4cf5790..94381f8e62 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
@@ -45,7 +45,7 @@ export const ProjectAccessListItem = ({
     return (
         <ListItem key={user.id} button>
             <ListItemAvatar>
-                <Avatar alt={user.name} src={user.imageUrl} />
+                <Avatar alt="Gravatar" src={user.imageUrl} />
             </ListItemAvatar>
             <ListItemText
                 id={labelId}
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index 7865803e09..37df37f8ab 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -8,6 +8,7 @@ import UserProfileContent from './UserProfileContent/UserProfileContent';
 import { IUser } from 'interfaces/user';
 import { ILocationSettings } from 'hooks/useLocationSettings';
 import { HEADER_USER_AVATAR } from 'utils/testIds';
+import unknownUser from 'assets/icons/unknownUser.png';
 
 interface IUserProfileProps {
     profile: IUser;
@@ -53,7 +54,7 @@ const UserProfile = ({
     }, [locationSettings]);
 
     const email = profile ? profile.email : '';
-    const imageUrl = email ? profile.imageUrl : 'unknown-user.png';
+    const imageUrl = email ? profile.imageUrl : unknownUser;
 
     return (
         <ClickAwayListener onClickAway={() => setShowProfile(false)}>
@@ -69,7 +70,7 @@ const UserProfile = ({
                     disableRipple
                 >
                     <Avatar
-                        alt="user image"
+                        alt="Your Gravatar"
                         src={imageUrl}
                         data-testid={HEADER_USER_AVATAR}
                     />
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
index fe11d22dcb..9cce505c70 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
@@ -74,7 +74,7 @@ const UserProfileContent = ({
                     )}
                 >
                     <Avatar
-                        alt="user image"
+                        alt="Your Gravatar"
                         src={imageUrl}
                         className={profileAvatarClasses}
                     />