fix: Add an `alt` attribute to all user avatars.

ui/src/components/Avatar/index.tsx

@@ -11,7 +11,7 @@ interface IProps {
   size: string;
   searchStr?: string;
   className?: string;
-  alt?: string;
+  alt: string;
 }
 
 const Index: FC<IProps> = ({

ui/src/components/BaseUserCard/index.tsx

@@ -33,6 +33,7 @@ const Index: FC<Props> = ({
               size={avatarSize}
               className={`me-1 ${avatarClass}`}
               searchStr={avatarSearchStr}
+              alt={data?.display_name}
             />
           )}
           <span className="me-1 text-break">{data?.display_name}</span>
@@ -45,6 +46,7 @@ const Index: FC<Props> = ({
               size={avatarSize}
               className={`me-1 ${avatarClass}`}
               searchStr={avatarSearchStr}
+              alt={data?.display_name}
             />
           )}
           <span className="me-1 text-break">{data?.display_name}</span>

ui/src/components/UserCard/index.tsx

@@ -32,6 +32,7 @@ const Index: FC<Props> = ({
             size="40px"
             className="me-2 d-none d-md-block"
             searchStr="s=96"
+            alt={data?.display_name}
           />
 
           <Avatar
@@ -39,6 +40,7 @@ const Index: FC<Props> = ({
             size="24px"
             className="me-2 d-block d-md-none"
             searchStr="s=48"
+            alt={data?.display_name}
           />
         </Link>
       ) : (
@@ -48,6 +50,7 @@ const Index: FC<Props> = ({
             size="40px"
             className="me-2 d-none d-md-block"
             searchStr="s=96"
+            alt={data?.display_name}
           />
 
           <Avatar
@@ -55,6 +58,7 @@ const Index: FC<Props> = ({
             size="24px"
             className="me-2 d-block d-md-none"
             searchStr="s=48"
+            alt={data?.display_name}
           />
         </>
       )}

ui/src/pages/Questions/Detail/components/InviteToAnswer/PeopleDropdown.tsx

@@ -145,7 +145,12 @@ const Index: FC<Props> = ({
               active={idx === currentIndex}
               className={idx === 0 ? 'mt-2' : ''}>
               <div className="d-flex align-items-center text-nowrap">
-                <Avatar avatar={p.avatar} size="24" className="rounded-1" />
+                <Avatar
+                  avatar={p.avatar}
+                  size="24"
+                  alt={p.display_name}
+                  className="rounded-1"
+                />
                 <div className="d-flex flex-wrap text-truncate">
                   <span className="ms-2 text-truncate">{p.display_name}</span>
                   <small className="text-secondary text-truncate ms-2">

ui/src/pages/Questions/Detail/components/InviteToAnswer/index.tsx

@@ -119,6 +119,7 @@ const Index: FC<Props> = ({ questionId, readOnly = false }) => {
                     avatar={user.avatar}
                     size="20"
                     className="rounded-1"
+                    alt={user.display_name}
                   />
                   <span className="text-nowrap ms-2">{user.display_name}</span>
                   {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
@@ -135,7 +136,12 @@ const Index: FC<Props> = ({ questionId, readOnly = false }) => {
                 key={user.username}
                 to={`/users/${user.username}`}
                 className="mx-2 my-1 d-inline-flex flex-nowrap">
-                <Avatar avatar={user.avatar} size="24" className="rounded-1" />
+                <Avatar
+                  avatar={user.avatar}
+                  size="24"
+                  alt={user.display_name}
+                  className="rounded-1"
+                />
                 <small className="text-nowrap ms-2">{user.display_name}</small>
               </Link>
             );

ui/src/pages/Users/Personal/components/UserInfo/index.tsx

@@ -39,10 +39,20 @@ const Index: FC<Props> = ({ data }) => {
     <div className="d-flex flex-column flex-md-row mb-4">
       {data?.status !== 'deleted' ? (
         <Link to={`/users/${data.username}`} reloadDocument>
-          <Avatar avatar={data.avatar} size="160px" searchStr="s=256" />
+          <Avatar
+            avatar={data.avatar}
+            size="160px"
+            searchStr="s=256"
+            alt={data.display_name}
+          />
         </Link>
       ) : (
-        <Avatar avatar={data.avatar} size="160px" searchStr="s=256" />
+        <Avatar
+          avatar={data.avatar}
+          size="160px"
+          searchStr="s=256"
+          alt={data.display_name}
+        />
       )}
 
       <div className="ms-0 ms-md-4 mt-4 mt-md-0">

ui/src/pages/Users/Settings/Profile/index.tsx

@@ -353,6 +353,7 @@ const Index: React.FC = () => {
                         count > 0 ? `&t=${new Date().valueOf()}` : ''
                       }`}
                       className="me-3 rounded"
+                      alt={formData.display_name.value}
                     />
                     <Form.Text className="text-muted mt-1">
                       <span>{t('avatar.gravatar_text')}</span>
@@ -381,6 +382,7 @@ const Index: React.FC = () => {
                         searchStr="s=256"
                         avatar={formData.avatar.custom}
                         className="me-2 bg-gray-300 "
+                        alt={formData.display_name.value}
                       />
                       <ButtonGroup vertical className="fit-content">
                         <UploadImg
@@ -405,7 +407,11 @@ const Index: React.FC = () => {
                   </Stack>
                 )}
                 {formData.avatar.type === 'default' && (
-                  <Avatar size="160px" avatar="" />
+                  <Avatar
+                    size="160px"
+                    avatar=""
+                    alt={formData.display_name.value}
+                  />
                 )}
               </div>
             </ImgViewer>

ui/src/pages/Users/index.tsx

@@ -55,6 +55,7 @@ const Users = () => {
                           size="48px"
                           avatar={user?.avatar}
                           searchStr="s=96"
+                          alt={user.display_name}
                         />
                       </Link>
                       <div className="ms-2">