fix: Add descriptive alt text to images for accessibility (#28469)

* fix: add descriptive alt text to images for accessibility Signed-off-by: Rakshit Yadav <[email protected]> * Apply suggestions from code review Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix: internationalize alt text strings for accessibility Signed-off-by: Rakshit Yadav <[email protected]> * Update apps/web/components/settings/EnableTwoFactorModal.tsx Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com> * add useLocale to EventTypeGroup component for translations Signed-off-by: Rakshit Yadav <[email protected]> --------- Signed-off-by: Rakshit Yadav <[email protected]> Co-authored-by: Sahitya Chandra <[email protected]> Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-03-17 21:11:01 +05:30
parent 089a39f59f
commit fa20f19e54
6 changed files with 9 additions and 5 deletions
@@ -54,7 +54,7 @@ const AccountSelector: FC<AccountSelectorProps> = ({
        }
      }}>
      <Avatar
-        alt={avatar || ""}
+        alt={t("avatar_of_name", { name })}
        imageSrc={getPlaceholderAvatar(avatar, name)} // if no image, use default avatar
        size="sm"
      />
@@ -233,7 +233,7 @@ const ConfigureStepCardContent: FC<ConfigureStepCardProps> = (props) => {
          {eventTypeGroups[groupIndex].eventTypes.some((eventType) => eventType.selected === true) && (
            <div className="mb-2 mt-4 flex items-center">
              <Avatar
-                alt=""
+                alt={t("app_icon", { app: group.slug })}
                imageSrc={group.image} // if no image, use default avatar
                size="md"
                className="inline-flex justify-center"
@@ -87,6 +87,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
  );
 };
 const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...props }) => {
+  const { t } = useLocale();
  const { control } = useFormContext<TEventTypesForm>();
  const { fields, update } = useFieldArray({
    control,
@@ -98,7 +99,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
    <div className="mt-10">
      <div className="mb-2 flex items-center">
        <Avatar
-          alt=""
+          alt={t("app_icon", { app: props.slug })}
          imageSrc={props.image} // if no image, use default avatar
          size="md"
          className="mt-1 inline-flex justify-center"
@@ -174,7 +174,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
            <div className="flex justify-center">
              {
                // eslint-disable-next-line @next/next/no-img-element
-                <img src={dataUri} alt="" />
+                <img src={dataUri} alt={t("two_factor_auth_qr_code")} />
              }
            </div>
            <p className="text-center font-mono text-xs">{secret}</p>
@@ -192,7 +192,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
            <div className="-mt-3 flex justify-center">
              {
                // eslint-disable-next-line @next/next/no-img-element
-                <img src={dataUri} alt="" />
+                <img src={dataUri} alt={t("two_factor_auth_qr_code")} />
              }
            </div>
            <p data-testid="two-factor-secret" className="mb-4 text-center font-mono text-xs">
@@ -1052,8 +1052,11 @@
  "your_email": "Your email",
  "avatar": "Avatar",
  "avatar_of_username": "Avatar of {{username}}",
+  "avatar_of_name": "{{name}}'s avatar",
  "change_avatar": "Change avatar",
  "upload_avatar": "Upload avatar",
+  "app_icon": "{{app}} app icon",
+  "two_factor_auth_qr_code": "Two-factor authentication QR code",
  "language": "Language",
  "timezone": "Timezone",
  "first_day_of_week": "First day of week",