From fa20f19e54b5747632017dafcc2cd735dc7d70d4 Mon Sep 17 00:00:00 2001
From: Rakshit <yadavrakshit60@gmail.com>
Date: Tue, 17 Mar 2026 21:11:01 +0530
Subject: [PATCH] fix: Add descriptive alt text to images for accessibility
 (#28469)

* fix: add descriptive alt text to images for accessibility

Signed-off-by: Rakshit Yadav <yadavrakshit60@gmail.com>

* 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 <yadavrakshit60@gmail.com>

* 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 <yadavrakshit60@gmail.com>

---------

Signed-off-by: Rakshit Yadav <yadavrakshit60@gmail.com>
Co-authored-by: Sahitya Chandra <sahityajb@gmail.com>
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 apps/web/components/apps/installation/AccountsStepCard.tsx   | 2 +-
 apps/web/components/apps/installation/ConfigureStepCard.tsx  | 2 +-
 apps/web/components/apps/installation/EventTypesStepCard.tsx | 3 ++-
 apps/web/components/security/EnableTwoFactorModal.tsx        | 2 +-
 apps/web/components/settings/EnableTwoFactorModal.tsx        | 2 +-
 packages/i18n/locales/en/common.json                         | 3 +++
 6 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/apps/installation/AccountsStepCard.tsx b/apps/web/components/apps/installation/AccountsStepCard.tsx
index 9948d8a354..82f78b241d 100644
--- a/apps/web/components/apps/installation/AccountsStepCard.tsx
+++ b/apps/web/components/apps/installation/AccountsStepCard.tsx
@@ -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"
       />
diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index bddc23e965..4c6b219624 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -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"
diff --git a/apps/web/components/apps/installation/EventTypesStepCard.tsx b/apps/web/components/apps/installation/EventTypesStepCard.tsx
index 3ca294eb8b..af677df1c1 100644
--- a/apps/web/components/apps/installation/EventTypesStepCard.tsx
+++ b/apps/web/components/apps/installation/EventTypesStepCard.tsx
@@ -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"
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 2486beec46..23b1a1c370 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -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>
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index f377f39057..960425a278 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -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">
diff --git a/packages/i18n/locales/en/common.json b/packages/i18n/locales/en/common.json
index 2eea2e4e2d..f97d2b02a7 100644
--- a/packages/i18n/locales/en/common.json
+++ b/packages/i18n/locales/en/common.json
@@ -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",