Change wording from avatar to profile picture (#7015)

* Change wording from avatar to profile picture

Signed-off-by: Aaron Raimist <aaron@raim.ist>

* lint

Signed-off-by: Aaron Raimist <aaron@raim.ist>

* Update EventListSummary

Signed-off-by: Aaron Raimist <aaron@raim.ist>

* Delete MembershipEventListSummary.tsx

Signed-off-by: Aaron Raimist <aaron@raim.ist>

* delint

* Update tests

---------

Signed-off-by: Aaron Raimist <aaron@raim.ist>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/avatars/BaseAvatar.tsx

@@ -46,6 +46,8 @@ interface IProps {
     inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
     className?: string;
     tabIndex?: number;
+    altText?: string;
+    ariaLabel?: string;
 }
 
 const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => {
@@ -113,6 +115,8 @@ const BaseAvatar: React.FC<IProps> = (props) => {
         onClick,
         inputRef,
         className,
+        altText = _t("Avatar"),
+        ariaLabel = _t("Avatar"),
         ...otherProps
     } = props;
 
@@ -153,7 +157,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
         if (onClick) {
             return (
                 <AccessibleButton
-                    aria-label={_t("Avatar")}
+                    aria-label={ariaLabel}
                     aria-live="off"
                     {...otherProps}
                     element="span"
@@ -193,7 +197,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
                     height: toPx(height),
                 }}
                 title={title}
-                alt={_t("Avatar")}
+                alt={altText}
                 inputRef={inputRef}
                 data-testid="avatar-img"
                 {...otherProps}

src/components/views/avatars/MemberAvatar.tsx

@@ -26,6 +26,7 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import { CardContext } from "../right_panel/context";
 import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
 import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
+import { _t } from "../../../languageHandler";
 
 interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url"> {
     member: RoomMember | null;
@@ -103,6 +104,8 @@ export default function MemberAvatar({
                       }
                     : props.onClick
             }
+            altText={_t("Profile picture")}
+            ariaLabel={_t("Profile picture")}
         />
     );
 }

src/components/views/elements/AppPermission.tsx

@@ -104,7 +104,7 @@ export default class AppPermission extends React.Component<IProps, IState> {
                 {_t("Any of the following data may be shared:")}
                 <ul>
                     <li>{_t("Your display name")}</li>
-                    <li>{_t("Your avatar URL")}</li>
+                    <li>{_t("Your profile picture URL")}</li>
                     <li>{_t("Your user ID")}</li>
                     <li>{_t("Your device ID")}</li>
                     <li>{_t("Your theme")}</li>

src/components/views/elements/EventListSummary.tsx

@@ -324,8 +324,11 @@ export default class EventListSummary extends React.Component<
             case TransitionType.ChangedAvatar:
                 res =
                     userCount > 1
-                        ? _t("%(severalUsers)schanged their avatar %(count)s times", { severalUsers: "", count })
-                        : _t("%(oneUser)schanged their avatar %(count)s times", { oneUser: "", count });
+                        ? _t("%(severalUsers)schanged their profile picture %(count)s times", {
+                              severalUsers: "",
+                              count,
+                          })
+                        : _t("%(oneUser)schanged their profile picture %(count)s times", { oneUser: "", count });
                 break;
             case TransitionType.NoChange:
                 res =

src/components/views/messages/EncryptionEvent.tsx

@@ -54,7 +54,7 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp
             const displayName = room?.getMember(dmPartner)?.rawDisplayName || dmPartner;
             subtitle = _t(
                 "Messages here are end-to-end encrypted. " +
-                    "Verify %(displayName)s in their profile - tap on their avatar.",
+                    "Verify %(displayName)s in their profile - tap on their profile picture.",
                 { displayName },
             );
         } else if (room && isLocalRoom(room)) {
@@ -62,7 +62,7 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp
         } else {
             subtitle = _t(
                 "Messages in this room are end-to-end encrypted. " +
-                    "When people join, you can verify them in their profile, just tap on their avatar.",
+                    "When people join, you can verify them in their profile, just tap on their profile picture.",
             );
         }