fix: Add descriptive alt text to images for accessibility (calcom#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>

Author: 3 people

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"
       />

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"

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"

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>

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">

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",