Fix alts and map key. (#4)

gnosis · Dec 17, 2021 · 2069ec5 · 2069ec5
1 parent 17466ab
commit 2069ec5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/components/CowSlider.tsx b/components/CowSlider.tsx
@@ -256,8 +256,8 @@ export default function CowSlider() {
         }
       </CowTop>
 
-      {activeBatchData.map(({ description }) =>
-        <CowSliderDescription>{description}</CowSliderDescription>
+      {activeBatchData.map(({ description }, index) =>
+        <CowSliderDescription key={index}>{description}</CowSliderDescription>
       )
       }
 

diff --git a/components/SocialList.tsx b/components/SocialList.tsx
@@ -70,7 +70,7 @@ export default function SocialList({ social, labels = true, iconSize, gap, inner
       {Object.keys(social).map((item, i) =>
         <li key={i}>
           <a href={social[item].url} target="_blank" rel="noopener nofollow">
-            <img src={`images/icons/${social[item].label.toLowerCase()}.svg`}></img>
+            <img src={`images/icons/${social[item].label.toLowerCase()}.svg`} alt={social[item].label}></img>
             {labels && <b>{social[item].label}</b>}
           </a>
         </li>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -45,7 +45,7 @@ export default function Home({ metricsData, siteConfigData }) {
       {/* 2nd section */}
       <Section flow={'column'}>
         <div>
-          <SectionImage margin={'0 auto -18rem'} height={'68rem'}><img loading="lazy" src="/images/cowBelt.jpg" /></SectionImage>
+          <SectionImage margin={'0 auto -18rem'} height={'68rem'}><img loading="lazy" src="/images/cowBelt.jpg" alt="A fast growing protocol" /></SectionImage>
           <h2>A fast growing protocol</h2>
           <SubTitle align="center">Getting you better prices, zero revert rates, <br />MEV protection and gas costs savings. <ExternalLink href="#">View analytics</ExternalLink></SubTitle>
           <Metrics>
@@ -62,7 +62,7 @@ export default function Home({ metricsData, siteConfigData }) {
       {/* 3rd section */}
       <Section flow={'column'} fullWidth id="about">
         <div>
-          <SectionImage margin={'0 auto -6rem'}><img loading="lazy" src="/images/barn.jpg" /></SectionImage>
+          <SectionImage margin={'0 auto -6rem'}><img loading="lazy" src="/images/barn.jpg" alt="Meta DEX Aggregator" /></SectionImage>
           <h3>More than a meta DEX aggregator</h3>
           <IconList>
 
@@ -118,7 +118,7 @@ export default function Home({ metricsData, siteConfigData }) {
           <h3>The life cycle of a CoW order</h3>
           <SubTitle align='center'>The protocol improves prices for users by batching trades, finding coincidence of wants (CoWs) <br />and tapping into all on chain liquidity - including aggregators. <Link href="#">Read More</Link></SubTitle>
           <SectionImage margin={'0'}>
-            <a href="/images/how-it-works.jpg" target="_blank" rel="nofollow noopener"><img loading="lazy" src="/images/how-it-works.jpg" /></a>
+            <a href="/images/how-it-works.jpg" target="_blank" rel="nofollow noopener"><img loading="lazy" src="/images/how-it-works.jpg" alt="How it works" /></a>
             <ButtonWrapper className="mobileOnly"><Button label={'View Full Image'} href="/images/how-it-works.jpg" target="_blank" rel="nofollow noopener" /></ButtonWrapper>
           </SectionImage>
         </div>
@@ -168,7 +168,7 @@ export default function Home({ metricsData, siteConfigData }) {
         </div>
         <div>
           <SectionImage margin={"0 0 -4rem -1rem"} width={"10rem"} height={"10rem"}>
-            <img loading="lazy" src="/images/icons/plug.svg" />
+            <img loading="lazy" src="/images/icons/plug.svg" alt="Plug-n-play" />
           </SectionImage>
 
           <h3>Plug-n-play trading protocol with just a few lines of code</h3>
@@ -190,7 +190,7 @@ export default function Home({ metricsData, siteConfigData }) {
       <Section flow={'column'} fullWidth>
         <div>
           <SectionImage margin={'0 0 -7rem'} height={'78rem'}>
-            <img loading="lazy" src="/images/cow-dark-forest.jpg" />
+            <img loading="lazy" src="/images/cow-dark-forest.jpg" alt="Guardian in the dark forest" />
           </SectionImage>
         </div>