From 29b43322ff531e37a8d3d131519d867a1de0dc8a Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Mon, 2 Aug 2021 11:28:37 +0300
Subject: [PATCH] nikolai.berestevich/refactor/cgange-alt-tags-tradetypes-39868

---
 src/pages/derivx/_accounts.js                 |  4 ++--
 src/pages/dmt5/_flexibility.js                |  6 ++---
 src/pages/dmt5/_why-trader.js                 | 12 +++++-----
 .../trade-types/margin/_available-markets.js  | 23 ++++---------------
 .../trade-types/margin/_why-trade-margin.js   | 10 ++++----
 .../multiplier/_available-trades.js           | 14 ++---------
 .../multiplier/_how-multiplier-works.js       |  6 ++---
 .../multiplier/_markets-available.js          |  9 ++------
 .../multiplier/_what-are-multipliers.js       | 12 +++++-----
 .../trade-types/options/_how-options-works.js |  6 ++---
 .../trade-types/options/_markets-available.js | 23 ++++---------------
 .../trade-types/options/_what-are-options.js  | 10 ++++----
 12 files changed, 45 insertions(+), 90 deletions(-)

diff --git a/src/pages/derivx/_accounts.js b/src/pages/derivx/_accounts.js
index 5e5d446c8e8..3e6ea55727e 100644
--- a/src/pages/derivx/_accounts.js
+++ b/src/pages/derivx/_accounts.js
@@ -24,14 +24,14 @@ const content = [
         text: (
             <Localize translate_text="Trade our exclusive, proprietary synthetic indices 24/7, which simulate real-world market movements." />
         ),
-        icon: <StyledIcon src={DxSyntheticIcon} alt="synthetic icon" />,
+        icon: <StyledIcon src={DxSyntheticIcon} alt="" />,
     },
     {
         header: <Localize translate_text="Financial" />,
         text: (
             <Localize translate_text="Trade forex, commodities and cryptocurrencies at high leverage." />
         ),
-        icon: <StyledIcon src={DxFinancialIcon} alt="financial icon" />,
+        icon: <StyledIcon src={DxFinancialIcon} alt="" />,
     },
 ]
 const Section = styled(SectionContainer)`
diff --git a/src/pages/dmt5/_flexibility.js b/src/pages/dmt5/_flexibility.js
index cb4dcc38c84..67074c0691f 100644
--- a/src/pages/dmt5/_flexibility.js
+++ b/src/pages/dmt5/_flexibility.js
@@ -31,21 +31,21 @@ const content = [
         text: (
             <Localize translate_text="Trade CFDs on our exclusive, proprietary synthetic indices 24/7 which simulate real-world market movements." />
         ),
-        icon: <StyledSyntheticIcon src={SyntheticIcon} alt="synthetic icon" />,
+        icon: <StyledSyntheticIcon src={SyntheticIcon} alt="" />,
     },
     {
         header: <Localize translate_text="Financial" />,
         text: (
             <Localize translate_text="Trade major (standard and micro-lots) and minor currency pairs, commodities, cryptocurrencies, and stocks & indices with high leverage." />
         ),
-        icon: <StyledFinancialIcon src={FinancialIcon} alt="financial icon" />,
+        icon: <StyledFinancialIcon src={FinancialIcon} alt="" />,
     },
     {
         header: <Localize translate_text="Financial STP" />,
         text: (
             <Localize translate_text="Trade major, minor, and exotic currency pairs, and cryptocurrencies with tight spreads and higher trade volumes, straight to the market." />
         ),
-        icon: <StyledFinancialStpIcon src={FinancialStpIcon} alt="financial stp icon" />,
+        icon: <StyledFinancialStpIcon src={FinancialStpIcon} alt="" />,
     },
 ]
 const Section = styled(SectionContainer)`
diff --git a/src/pages/dmt5/_why-trader.js b/src/pages/dmt5/_why-trader.js
index 016a6d5eae4..533866b0247 100644
--- a/src/pages/dmt5/_why-trader.js
+++ b/src/pages/dmt5/_why-trader.js
@@ -14,7 +14,7 @@ const card_content = [
         header: localize('Quick demo account sign-up'),
         text: localize('Practise with a demo account preloaded with unlimited virtual funds.'),
         image: InstantAccess,
-        alt: 'instant access',
+        key: 0,
     },
     {
         header: localize('Multiple assets on a single platform'),
@@ -22,7 +22,7 @@ const card_content = [
             'Explore forex, synthetic indices, stocks, and commodities on an all-in-one platform.',
         ),
         image: SyntheticIndices,
-        alt: 'syntethic indices',
+        key: 1,
     },
     {
         header: localize('24/7 trading'),
@@ -30,7 +30,7 @@ const card_content = [
             'Trade round-the-clock, even on weekends, with our proprietary synthetic indices.',
         ),
         image: Seven,
-        alt: 'seven',
+        key: 2,
     },
     {
         header: localize('Licensed and regulated'),
@@ -38,7 +38,7 @@ const card_content = [
             'Trade with a regulated industry pioneer trusted by traders for more than 20 years.',
         ),
         image: MinimalRisk,
-        alt: 'minimal risk',
+        key: 3,
     },
 ]
 
@@ -117,9 +117,9 @@ const WhyTrader = () => {
             <CardContainer>
                 {card_content.map((card) => {
                     return (
-                        <Card key={card.alt}>
+                        <Card key={card.key}>
                             <div>
-                                <img src={card.image} alt={card.alt} />
+                                <img src={card.image} alt="" />
                             </div>
                             <StyledCardHeader
                                 mt="0.8rem"
diff --git a/src/pages/trade-types/margin/_available-markets.js b/src/pages/trade-types/margin/_available-markets.js
index fbb62163058..0be02af34ec 100644
--- a/src/pages/trade-types/margin/_available-markets.js
+++ b/src/pages/trade-types/margin/_available-markets.js
@@ -50,7 +50,7 @@ const AvailableMarkets = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img src={Forex} alt="forex" width="64" height="64" />
+                                    <img src={Forex} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">{localize('Forex')}</StyledText>
                                 </MobileCardHeader>
@@ -70,12 +70,7 @@ const AvailableMarkets = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={SyntheticIndices}
-                                        alt="synthetic indices"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={SyntheticIndices} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">
                                         {localize('Synthetic indices')}
@@ -97,12 +92,7 @@ const AvailableMarkets = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={Commodities}
-                                        alt="commodities"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={Commodities} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">{localize('Commodities')}</StyledText>
                                 </MobileCardHeader>
@@ -122,12 +112,7 @@ const AvailableMarkets = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={StockIndices}
-                                        alt="stock indices"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={StockIndices} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">
                                         {localize('Stock indices')}
diff --git a/src/pages/trade-types/margin/_why-trade-margin.js b/src/pages/trade-types/margin/_why-trade-margin.js
index 45c8570fdca..80995fac4ec 100644
--- a/src/pages/trade-types/margin/_why-trade-margin.js
+++ b/src/pages/trade-types/margin/_why-trade-margin.js
@@ -23,7 +23,7 @@ const WhyTradeMargin = () => {
                     </Header>
                     <Grid>
                         <WhyTradeItem>
-                            <img src={HighLeverge} alt="high leverage" />
+                            <img src={HighLeverge} alt="" />
                             <Text weight="bold" mb="0.8rem" mt="1.6rem">
                                 {localize('High leverage, low spreads')}
                             </Text>
@@ -38,7 +38,7 @@ const WhyTradeMargin = () => {
                             </Text>
                         </WhyTradeItem>
                         <WhyTradeItem>
-                            <img src={SyntheticIndices} alt="synthetic indices" />
+                            <img src={SyntheticIndices} alt="" />
                             <Text weight="bold" mb="0.8rem" mt="1.6rem">
                                 {localize('All favourite markets available')}
                             </Text>
@@ -49,7 +49,7 @@ const WhyTradeMargin = () => {
                             </Text>
                         </WhyTradeItem>
                         <WhyTradeItem>
-                            <img src={MaximizePotentialProfit} alt="maximize potential profit" />
+                            <img src={MaximizePotentialProfit} alt="" />
                             <Text weight="bold" mb="0.8rem" mt="1.6rem">
                                 {localize('Go long and short')}
                             </Text>
@@ -60,7 +60,7 @@ const WhyTradeMargin = () => {
                             </Text>
                         </WhyTradeItem>
                         <WhyTradeItem>
-                            <img src={FriendlySupport} alt="friendly support" />
+                            <img src={FriendlySupport} alt="" />
                             <Text weight="bold" mb="0.8rem" mt="1.6rem">
                                 {localize('Expert and friendly support')}
                             </Text>
@@ -69,7 +69,7 @@ const WhyTradeMargin = () => {
                             </Text>
                         </WhyTradeItem>
                         <WhyTradeItem>
-                            <img src={InstantAccess} alt="instant access" />
+                            <img src={InstantAccess} alt="" />
                             <Text weight="bold" mb="0.8rem" mt="1.6rem">
                                 {localize('Instant access')}
                             </Text>
diff --git a/src/pages/trade-types/multiplier/_available-trades.js b/src/pages/trade-types/multiplier/_available-trades.js
index 6a5e09389c2..e290412c394 100644
--- a/src/pages/trade-types/multiplier/_available-trades.js
+++ b/src/pages/trade-types/multiplier/_available-trades.js
@@ -164,20 +164,10 @@ const Card = ({ display_name, active_tab, onTabChange, name }) => {
         <CardContainer name={name} active_tab={active_tab} onClick={() => onTabChange(name)}>
             <Flex height="fit-content" jc="flex-start" ai="center">
                 {active_tab === 'Forex' && (
-                    <TabMarginIcon
-                        src={ForexIcon}
-                        alt="margin icon"
-                        name={name}
-                        active_tab={active_tab}
-                    />
+                    <TabMarginIcon src={ForexIcon} alt="" name={name} active_tab={active_tab} />
                 )}
                 {active_tab === 'Synthetic Indices' && (
-                    <TabOptionIcon
-                        src={SyntheticIcon}
-                        alt="option icon"
-                        name={name}
-                        active_tab={active_tab}
-                    />
+                    <TabOptionIcon src={SyntheticIcon} alt="" name={name} active_tab={active_tab} />
                 )}
                 <CardHeader as="h4" type="sub-section-title" width="auto">
                     {display_name}
diff --git a/src/pages/trade-types/multiplier/_how-multiplier-works.js b/src/pages/trade-types/multiplier/_how-multiplier-works.js
index bcec30dc3e7..0409f8f4b31 100644
--- a/src/pages/trade-types/multiplier/_how-multiplier-works.js
+++ b/src/pages/trade-types/multiplier/_how-multiplier-works.js
@@ -115,7 +115,7 @@ const HowOptionsWorks = () => {
                     <HowItWorksItem>
                         <OptionItems>
                             <div>
-                                <img src={DefinePosition} alt="define your position" />
+                                <img src={DefinePosition} alt="" />
                             </div>
                             <StyledText>{localize('Define your position')}</StyledText>
                         </OptionItems>
@@ -129,7 +129,7 @@ const HowOptionsWorks = () => {
                     <HowItWorksItem>
                         <OptionItems>
                             <div>
-                                <img src={SetOptionalParameters} alt="set optional parameters" />
+                                <img src={SetOptionalParameters} alt="" />
                             </div>
                             <StyledText>{localize('Set optional parameters')}</StyledText>
                         </OptionItems>
@@ -142,7 +142,7 @@ const HowOptionsWorks = () => {
                     <HowItWorksItem>
                         <OptionItems>
                             <div>
-                                <img src={PurchaseContract} alt="purchase your contract" />
+                                <img src={PurchaseContract} alt="" />
                             </div>
                             <StyledText>{localize('Purchase your contract')}</StyledText>
                         </OptionItems>
diff --git a/src/pages/trade-types/multiplier/_markets-available.js b/src/pages/trade-types/multiplier/_markets-available.js
index 310bdc8aac9..80f3f19ff21 100644
--- a/src/pages/trade-types/multiplier/_markets-available.js
+++ b/src/pages/trade-types/multiplier/_markets-available.js
@@ -48,7 +48,7 @@ const MarketsAvailable = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img src={Forex} alt="forex" width="64" height="64" />
+                                    <img src={Forex} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">{localize('Forex')}</StyledText>
                                 </MobileCardHeader>
@@ -68,12 +68,7 @@ const MarketsAvailable = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={SyntheticIndices}
-                                        alt="synthetic indices"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={SyntheticIndices} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">
                                         {localize('Synthetic indices')}
diff --git a/src/pages/trade-types/multiplier/_what-are-multipliers.js b/src/pages/trade-types/multiplier/_what-are-multipliers.js
index 6c4dbf5d50d..34ad9c76b8c 100644
--- a/src/pages/trade-types/multiplier/_what-are-multipliers.js
+++ b/src/pages/trade-types/multiplier/_what-are-multipliers.js
@@ -253,7 +253,7 @@ const WhatAreOptions = () => {
                     <Grid>
                         <WhyTradeItem>
                             <div>
-                                <img src={MinimalRisk} alt="minimal risk" />
+                                <img src={MinimalRisk} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Better risk management')}
@@ -266,7 +266,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={FullControl} alt="full control" />
+                                <img src={FullControl} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Increased market exposure')}
@@ -279,7 +279,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={ResponsivePlatform} alt="responsive platform" />
+                                <img src={ResponsivePlatform} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Secure, responsive platform')}
@@ -292,7 +292,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={FriendlySupport} alt="friendly support" />
+                                <img src={FriendlySupport} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Expert and friendly support')}
@@ -303,7 +303,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={Seven} alt="seven" />
+                                <img src={Seven} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Trade 24/7, 365 days a year')}
@@ -316,7 +316,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={CrashBoom} alt="crash boom" />
+                                <img src={CrashBoom} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Crash/Boom indices')}
diff --git a/src/pages/trade-types/options/_how-options-works.js b/src/pages/trade-types/options/_how-options-works.js
index be068a9d6a4..35195d2ad64 100644
--- a/src/pages/trade-types/options/_how-options-works.js
+++ b/src/pages/trade-types/options/_how-options-works.js
@@ -86,7 +86,7 @@ const HowOptionsWorks = () => {
                         <HowItWorksItem>
                             <OptionItems>
                                 <div>
-                                    <img src={DefinePosition} alt="define your position" />
+                                    <img src={DefinePosition} alt="" />
                                 </div>
                                 <StyledText weight="bold">
                                     {localize('Define your position')}
@@ -101,7 +101,7 @@ const HowOptionsWorks = () => {
                         <HowItWorksItem>
                             <OptionItems>
                                 <div>
-                                    <img src={GetQuote} alt="get quote" />
+                                    <img src={GetQuote} alt="" />
                                 </div>
                                 <StyledText weight="bold">{localize('Get quote')}</StyledText>
                             </OptionItems>
@@ -114,7 +114,7 @@ const HowOptionsWorks = () => {
                         <HowItWorksItem>
                             <OptionItems>
                                 <div>
-                                    <img src={PurchaseContract} alt="purchase your contract" />
+                                    <img src={PurchaseContract} alt="" />
                                 </div>
                                 <StyledText weight="bold">
                                     {localize('Purchase your contract')}
diff --git a/src/pages/trade-types/options/_markets-available.js b/src/pages/trade-types/options/_markets-available.js
index 6d00e4b80d0..6c2b49ca04c 100644
--- a/src/pages/trade-types/options/_markets-available.js
+++ b/src/pages/trade-types/options/_markets-available.js
@@ -50,7 +50,7 @@ const MarketsAvailable = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img src={Forex} alt="forex" width="64" height="64" />
+                                    <img src={Forex} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">{localize('Forex')}</StyledText>
                                 </MobileCardHeader>
@@ -70,12 +70,7 @@ const MarketsAvailable = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={SyntheticIndices}
-                                        alt="synthetic indices"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={SyntheticIndices} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">
                                         {localize('Synthetic indices')}
@@ -97,12 +92,7 @@ const MarketsAvailable = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={Commodities}
-                                        alt="commodities"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={Commodities} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">{localize('Commodities')}</StyledText>
                                 </MobileCardHeader>
@@ -122,12 +112,7 @@ const MarketsAvailable = () => {
                         <MarketsItem>
                             <Card>
                                 <MobileCardHeader>
-                                    <img
-                                        src={StockIndices}
-                                        alt="stock indices"
-                                        width="64"
-                                        height="64"
-                                    />
+                                    <img src={StockIndices} alt="" width="64" height="64" />
 
                                     <StyledText weight="bold">
                                         {localize('Stock indices')}
diff --git a/src/pages/trade-types/options/_what-are-options.js b/src/pages/trade-types/options/_what-are-options.js
index 98fcea78988..b5e8846c0db 100644
--- a/src/pages/trade-types/options/_what-are-options.js
+++ b/src/pages/trade-types/options/_what-are-options.js
@@ -66,7 +66,7 @@ const WhatAreOptions = () => {
                     <Grid>
                         <WhyTradeItem>
                             <div>
-                                <img src={FixedPayout} alt="fixed payout" />
+                                <img src={FixedPayout} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Fixed, predictable payout')}
@@ -79,7 +79,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={SyntheticIndices} alt="synthetic indices" />
+                                <img src={SyntheticIndices} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('All favourite markets and more')}
@@ -92,7 +92,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={InstantAccess} alt="instant access" />
+                                <img src={InstantAccess} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Instant access')}
@@ -101,7 +101,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={UserFriendly} alt="user friendly platforms" />
+                                <img src={UserFriendly} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('User-friendly platforms with powerful chart widgets')}
@@ -114,7 +114,7 @@ const WhatAreOptions = () => {
                         </WhyTradeItem>
                         <WhyTradeItem>
                             <div>
-                                <img src={FlexibleTrade} alt="flexible trade types" />
+                                <img src={FlexibleTrade} alt="" />
                             </div>
                             <Text mt="1.6rem" mb="0.8rem" weight="bold">
                                 {localize('Flexible trade types with minimal capital requirements')}