From 7cf6c1caf9d0f0aa55d920f92adb466fe2647b31 Mon Sep 17 00:00:00 2001
From: mayuran-deriv <129507167+mayuran-deriv@users.noreply.github.com>
Date: Mon, 18 Sep 2023 07:59:15 +0400
Subject: [PATCH] fix: alt tag fix (#5641)

---
 .../custom/carousel/_platforms-carousel.tsx           |  2 +-
 .../templates/signup/with-banner/banner/index.tsx     |  2 +-
 .../templates/signup/with-banner/social/index.tsx     |  4 ++--
 src/features/components/templates/tabs/menu/index.tsx | 11 +++++++++--
 .../pages/home/trade-types/trade-type.item.tsx        |  4 ++--
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/custom/carousel/_platforms-carousel.tsx b/src/components/custom/carousel/_platforms-carousel.tsx
index 33179e138e4..005bd8af746 100644
--- a/src/components/custom/carousel/_platforms-carousel.tsx
+++ b/src/components/custom/carousel/_platforms-carousel.tsx
@@ -129,7 +129,7 @@ const GenericCarousel = ({ renderableData, mainHeading }: TGenericCarousel) => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img src={icon} width="48" height="48" />
+                                    <img src={icon} width="48" height="48" alt={heading} />
                                     <StyledText weight="bold">{heading}</StyledText>
                                 </MobileCardHeader>
                                 <StyledPara>
diff --git a/src/features/components/templates/signup/with-banner/banner/index.tsx b/src/features/components/templates/signup/with-banner/banner/index.tsx
index 91a1e5ec73b..f60224d9056 100644
--- a/src/features/components/templates/signup/with-banner/banner/index.tsx
+++ b/src/features/components/templates/signup/with-banner/banner/index.tsx
@@ -36,7 +36,7 @@ const PublicSignupBanner = () => {
                     <Typography.Heading size="large" textcolor="white">
                         <Localize translate_text={'_t_Get a taste of the Deriv experience_t_'} />
                     </Typography.Heading>
-                    <Image has_rtl src={Arrow} width={32} height={32} />
+                    <Image has_rtl src={Arrow} width={32} height={32} alt={'right icon'} />
                 </Flex.Box>
             </Link>
         </Flex.Box>
diff --git a/src/features/components/templates/signup/with-banner/social/index.tsx b/src/features/components/templates/signup/with-banner/social/index.tsx
index e86aa75fdc9..6245c06defb 100644
--- a/src/features/components/templates/signup/with-banner/social/index.tsx
+++ b/src/features/components/templates/signup/with-banner/social/index.tsx
@@ -4,7 +4,7 @@ import Flex from 'features/components/atoms/flex-box'
 import Button from 'features/components/atoms/button'
 import Image from 'features/components/atoms/image'
 import Typography from 'features/components/atoms/typography'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import AppleLogo from 'images/svg/apple_logo.svg'
 import FacebookLogo from 'images/svg/facebook_logo.svg'
 import GoogleLogo from 'images/svg/google_logo.svg'
@@ -56,7 +56,7 @@ const PublicSignupSocial = () => {
                     outlined
                 >
                     <Flex.Box justify="center" align="end" gap={'2x'}>
-                        <Image src={buttonItem.img} />
+                        <Image src={buttonItem.img} alt={localize(buttonItem.title)} />
                         <Typography.Paragraph
                             size="small"
                             weight="bold"
diff --git a/src/features/components/templates/tabs/menu/index.tsx b/src/features/components/templates/tabs/menu/index.tsx
index cb0aa2f58f6..7f7e9db89cf 100644
--- a/src/features/components/templates/tabs/menu/index.tsx
+++ b/src/features/components/templates/tabs/menu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import FlexBox from 'features/components/atoms/flex-box'
 import Tab from 'features/components/atoms/tab'
 import { TString } from 'types/generics'
@@ -41,7 +41,14 @@ const TabMenu = ({
                     >
                         {icon && (
                             <FlexBox.Box justify="center" padding_block="6x">
-                                {icon && <Image src={icon} width="24px" height="24px" />}
+                                {icon && (
+                                    <Image
+                                        src={icon}
+                                        width="24px"
+                                        height="24px"
+                                        alt={localize(tab_name)}
+                                    />
+                                )}
                             </FlexBox.Box>
                         )}
 
diff --git a/src/features/pages/home/trade-types/trade-type.item.tsx b/src/features/pages/home/trade-types/trade-type.item.tsx
index 36397ae56d9..8196d8e9f2b 100644
--- a/src/features/pages/home/trade-types/trade-type.item.tsx
+++ b/src/features/pages/home/trade-types/trade-type.item.tsx
@@ -3,7 +3,7 @@ import { item_container, item_learn_more, item_description } from './styles.modu
 import { TradeTypeItemType } from './types'
 import Flex from 'features/components/atoms/flex-box'
 import Link from 'features/components/atoms/link'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import Typography from 'features/components/atoms/typography'
 import Image from 'features/components/atoms/image'
 
@@ -22,7 +22,7 @@ const TradeTypeItem = ({ item }: TradeTypeItemProps) => {
                 padding_block: '20x',
             }}
         >
-            <Image src={item.icon_src} width={96} height={96} />
+            <Image src={item.icon_src} width={96} height={96} alt={localize(item?.title)} />
             <Typography.Heading as="h3" size="xs" textcolor="inverted" mt={'5x'}>
                 <Localize translate_text={item.title} />
             </Typography.Heading>