#18 about image alts and removing frragments

Scout-NU · May 13, 2021 · 0ee31d7 · 0ee31d7
1 parent 81d4d69
commit 0ee31d7
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/src/components/about/about-style.js b/src/components/about/about-style.js
@@ -388,3 +388,7 @@ export const IndustryContextBackgroundImage = styled.div`
     object-fit: cover;
   }
 `
+
+export const AboutContainer = styled.div`
+
+`
diff --git a/src/components/about/about.js b/src/components/about/about.js
@@ -34,26 +34,27 @@ import {
   CompetitorTH,
   ComparisonCTA,
   IndustryContextBackgroundImage,
+  AboutContainer,
 } from "./about-style"
 
 import Check from "../../vectors/CheckIcon.svg"
 import Xicon from "../../vectors/xicon.svg"
 
 export default function About({ data }) {
   return (
-    <>
+    <AboutContainer>
       <AboutHeaderText>
         <H2>About</H2>
       </AboutHeaderText>
 
       <MissionSection>
         <MissionImage>
-          <img src={data.mission_image.url} />
+          <img alt={data.mission_image.alt} src={data.mission_image.url} />
         </MissionImage>
 
         <MissionText>
           <IconPlaceholder>
-            <img src={data.mission_icon.url} />
+            <img alt={data.mission_icon.alt} src={data.mission_icon.url} />
           </IconPlaceholder>
           <H2>{data.mission_heading}</H2>
           <MissionTextParagraph>
@@ -64,20 +65,32 @@ export default function About({ data }) {
 
       <IndustryContextSection>
         <IndustryContextBackgroundImage>
-          <img src={data.industry_context_background_image.url} />
+          <img
+            alt={data.industry_context_background_image.alt}
+            src={data.industry_context_background_image.url}
+          />
         </IndustryContextBackgroundImage>
         <IndustryContextContainer>
           <div>
             <IconPlaceholder>
-              <img src={data.industry_context_icon.url} />
+              <img
+                alt={data.industry_context_icon.alt}
+                src={data.industry_context_icon.url}
+              />
             </IconPlaceholder>
             <H2>{data.industry_context_heading}</H2>
             <IndustryContextExamples>
               {data.industry_context_explanation.map((example, id) => {
                 return (
                   <IndustryContextGroup key={id}>
                     <IndustryContextImage>
-                      <img src={example.explanation_image.url} />
+                      <img
+                        alt={
+                          example.explanation_image.alt &&
+                          example.explanation_image.alt
+                        }
+                        src={example.explanation_image.url}
+                      />
                     </IndustryContextImage>
                     <IndustryContextExampleParagraph>
                       <Body>{example.explanation_description}</Body>
@@ -105,7 +118,10 @@ export default function About({ data }) {
             return (
               <BenefitGroup key={id}>
                 <BenefitImage>
-                  <img src={benefit.product_benefit_image.url} />
+                  <img
+                    alt={benefit.product_benefit_image.alt}
+                    src={benefit.product_benefit_image.url}
+                  />
                 </BenefitImage>
                 <BenefitTitle>
                   <Body>{benefit.product_benefit_title}</Body>
@@ -122,11 +138,9 @@ export default function About({ data }) {
             <tr>
               <th></th>
               {data.company.map((competitor, id) => (
-                <>
-                  <CompetitorTH key={id}>
-                    <CompetitorName>{competitor.company_name}</CompetitorName>
-                  </CompetitorTH>
-                </>
+                <CompetitorTH key={id}>
+                  <CompetitorName>{competitor.company_name}</CompetitorName>
+                </CompetitorTH>
               ))}
             </tr>
             {data.rows.map((feature, id) => (
@@ -182,7 +196,10 @@ export default function About({ data }) {
               return (
                 <TeamMember key={id}>
                   <MemberImage>
-                    <img src={member.team_member_image.url} />
+                    <img
+                      alt={member.team_member_image.alt}
+                      src={member.team_member_image.url}
+                    />
                   </MemberImage>
                   <H3>{member.team_member_title}</H3>
                   <Body>{member.team_member_description}</Body>
@@ -192,6 +209,6 @@ export default function About({ data }) {
           </CompanyTeamMemberGroup>
         </CompanyTeamSection>
       </CompanyBackgroundSection>
-    </>
+    </AboutContainer>
   )
 }
diff --git a/src/components/process/process.js b/src/components/process/process.js
@@ -87,7 +87,6 @@ export default function Process({ data }) {
       </FindSection>
 
       <StepsSection>
-        {console.log(data.prismicProcessPage.data.steps[0])}
         {data.prismicProcessPage.data.steps.map(step => {
           return (
             <Step>

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -34,22 +34,27 @@ export const query = graphql`
           explanation_description
           explanation_image {
             url
+            alt
           }
         }
         industry_context_heading
         industry_context_icon {
           url
+          alt
         }
         industry_context_background_image {
           url
+          alt
         }
         mission_description
         mission_heading
         mission_icon {
           url
+          alt
         }
         mission_image {
           url
+          alt
         }
         rows {
           feature_name
@@ -60,6 +65,7 @@ export const query = graphql`
         product_benefit {
           product_benefit_image {
             url
+            alt
           }
           product_benefit_title
         }
@@ -78,6 +84,7 @@ export const query = graphql`
           team_member_description
           team_member_image {
             url
+            alt
           }
           team_member_title
         }