Alt text

.eslintrc

@@ -1,6 +1,11 @@
 {
-  "extends": ["next", "next/core-web-vitals", "prettier"],
-  "plugins": ["i18next"],
+  "extends": [
+    "next",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "plugins": ["i18next", "jsx-a11y"],
   "rules": {
     // TODO: Fix these warnings and make them errors by removing these overrides.
     "react/no-unescaped-entities": "off",
@@ -12,6 +17,16 @@
         "additionalHooks": "^useAsync$"
       }
     ],
+    "jsx-a11y/alt-text": [
+      2,
+      {
+        "elements": ["img", "object", "area", "input[type=\"image\"]"],
+        "img": ["Image"],
+        "object": ["Object"],
+        "area": ["Area"],
+        "input[type=\"image\"]": ["InputImage"]
+      }
+    ],
     // TODO: Fix existing warnings and make them errors going forward
     "i18next/no-literal-string": "warn"
   }

components/CommunicatingWithLegislators/CommunicatingWithLegislatorsContent.tsx

@@ -37,7 +37,7 @@ const WritingContent = () => (
         className={`float-md-end`}
         fluid
         src="/computer-text-blob.svg"
-        alt="computer display with lines representing text"
+        alt=""
       />
     </Col>
   </Row>
@@ -50,11 +50,7 @@ const OralContent = () => (
       md={{ span: 4, order: 0 }}
       lg={{ span: 3, order: 0, offset: 1 }}
     >
-      <StyledImage
-        fluid
-        src="/mic-with-testify.svg"
-        alt="microphone next to a sheet of paper"
-      />
+      <StyledImage fluid src="/mic-with-testify.svg" alt="" />
     </Col>
     <Col
       xs={{ span: 12, order: 1 }}
@@ -86,7 +82,7 @@ const WriteOrCallContent = () => (
         className={`float-md-end`}
         fluid
         src="/open-envelope.svg"
-        alt="envelope with letter sticking out"
+        alt=""
       />
     </Col>
   </Row>

components/EditProfilePage/ImageInput.tsx

@@ -25,7 +25,7 @@ export const ImageInput = ({ className }: ImageInputProps) => {
     },
     [updateProfileImage]
   )
-  const { t } = useTranslation("profile")
+  const { t } = useTranslation(["profile", "auth"])
 
   return (
     <div className="d-flex flex-row px-3 col">
@@ -38,7 +38,7 @@ export const ImageInput = ({ className }: ImageInputProps) => {
           borderRadius: "2rem",
           margin: "1rem"
         }}
-        alt="Profile image"
+        alt={t("profileIcon")}
         src={profileImage}
       ></Image>
       {updatingProfileImage && <Spinner animation="border" />}

components/EditProfilePage/ProfileSettingsModal.tsx

@@ -41,15 +41,19 @@ function RenderPrivacyText(role: Role, isPublic: boolean) {
   }
 }
 
-const EmailIcon = () => (
-  <Image
-    className={`me-1`}
-    src="/mail.svg"
-    alt="open envelope with letter, toggles update frequency options"
-    width="22"
-    height="19"
-  />
-)
+const EmailIcon = () => {
+  const { t } = useTranslation("editProfile")
+
+  return (
+    <Image
+      className={`me-1`}
+      src="/mail.svg"
+      alt={t("emailIconAlt")}
+      width="22"
+      height="19"
+    />
+  )
+}
 
 export default function ProfileSettingsModal({
   actions,

components/EditProfilePage/TestimonyFAQ.tsx

@@ -18,12 +18,7 @@ export const TestimonyFAQ = ({ className }: { className: string }) => {
       <Card.Body>
         <h2>{t("testimonies.faq")}</h2>
         <div className="p-4 m-3 d-flex justify-content-center">
-          <Image
-            className="w-100"
-            fluid
-            alt="writing icon"
-            src="/writing.svg"
-          ></Image>
+          <Image className="w-100" fluid alt="" src="/writing.svg"></Image>
         </div>
 
         <h4>{t("testimonies.edit")}</h4>

components/Faq/FaqQandAButton.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from "react"
 import { Image, Collapse } from "../bootstrap"
+import { useTranslation } from "next-i18next"
 
 type faqQandAProps = {
   question: string
   answer: string
 }
 
 export const FaqQandAButton = ({ question, answer }: faqQandAProps) => {
+  const { t } = useTranslation("common")
   const [open, setOpen] = useState(false)
 
   useEffect(() => {}, [open])
@@ -32,9 +34,9 @@ export const FaqQandAButton = ({ question, answer }: faqQandAProps) => {
       >
         <div className={`align-items-center d-flex mt-4`}>
           {open ? (
-            <Image src="/minus.svg" className={`me-2`} alt="minus icon" />
+            <Image src="/minus.svg" className={`me-2`} alt={t("hideAns")} />
           ) : (
-            <Image src="/add.svg" className={`me-2`} alt="plus icon" />
+            <Image src="/add.svg" className={`me-2`} alt={t("showAns")} />
           )}
           {question}
         </div>

components/Footer/Footer.tsx

@@ -78,7 +78,7 @@ function MapleContainer({ className }: { className?: string }) {
           >
             <Image
               src="/images/twitter.svg"
-              alt="Twitter Icon"
+              alt={t("links.socials.twitter")}
               width="24"
               height="24"
             ></Image>
@@ -92,7 +92,7 @@ function MapleContainer({ className }: { className?: string }) {
           >
             <Image
               src="/images/instagram.svg"
-              alt="Instagram Icon"
+              alt={t("links.socials.instagram")}
               width="24"
               height="24"
             ></Image>
@@ -106,7 +106,7 @@ function MapleContainer({ className }: { className?: string }) {
           >
             <Image
               src="/Linked In.svg"
-              alt="LinkedIn Icon"
+              alt={t("links.socials.linkedin")}
               width="24"
               height="24"
             ></Image>
@@ -117,7 +117,7 @@ function MapleContainer({ className }: { className?: string }) {
         <Image
           className="bg-transparent"
           src="/maple-footer-white.png"
-          alt="MAPLE logo"
+          alt={t("logo")}
           width={100}
         />
       </Row>

components/GoalsAndMissionCardContent/GoalsAndMissionCardContent.tsx

@@ -27,11 +27,7 @@ const OurGoalsCardContent = () => {
       <Row className="mb-4">
         <Col md={6}>
           <figure className="text-center mb-3">
-            <OurGoalsImage
-              fluid
-              src="/gov-with-key.svg"
-              alt="government building with key"
-            />
+            <OurGoalsImage fluid src="/gov-with-key.svg" alt="" />
             <figcaption className="text-align-center text-align-sm-start fs-5 fw-bold mt-3">
               {t("goals.increase")}
             </figcaption>
@@ -43,7 +39,7 @@ const OurGoalsCardContent = () => {
             <OurGoalsImage
               fluid
               src="/doc-with-arrows-from-people.svg"
-              alt="government building with key"
+              alt=""
             />
             <figcaption className="text-align-center text-align-sm-start fs-5 fw-bold mt-3">
               {t("goals.engage")}
@@ -55,11 +51,7 @@ const OurGoalsCardContent = () => {
       <Row>
         <Col xs={{ span: 12, order: 2 }} md={{ span: 6, order: 1 }}>
           <figure className="text-center mb-3">
-            <OurGoalsImage
-              fluid
-              src="/doc-with-arrows-to-people.svg"
-              alt="government building with key"
-            />
+            <OurGoalsImage fluid src="/doc-with-arrows-to-people.svg" alt="" />
             <figcaption className="text-align-center text-align-sm-start fs-5 fw-bold mt-3">
               {t("goals.strengthen")}
             </figcaption>
@@ -68,11 +60,7 @@ const OurGoalsCardContent = () => {
 
         <Col xs={{ span: 12, order: 1 }} md={{ span: 6, order: 1 }}>
           <figure className="text-center mb-3">
-            <OurGoalsImage
-              fluid
-              src="/gov-with-key.svg"
-              alt="government building with key"
-            />
+            <OurGoalsImage fluid src="/gov-with-key.svg" alt="" />
             <figcaption className="text-align-center text-align-sm-start fs-5 fw-bold mt-3">
               {t("goals.encourage")}
             </figcaption>
@@ -104,11 +92,7 @@ const OurMissionCardContent = () => {
           lg={4}
           className={`text-center`}
         >
-          <MissionImage
-            fluid
-            src="/leg-with-mag-glass.svg"
-            alt="document with magnifying glass"
-          />
+          <MissionImage fluid src="/leg-with-mag-glass.svg" alt="" />
         </Col>
       </Row>
 
@@ -119,11 +103,7 @@ const OurMissionCardContent = () => {
           lg={4}
           className="text-center"
         >
-          <MissionImage
-            fluid
-            src="/doc-treasure-box.svg"
-            alt="document with magnifying glass"
-          />
+          <MissionImage fluid src="/doc-treasure-box.svg" alt="" />
         </Col>
         <Col
           sm={{ span: 12, order: 2 }}

components/HearingsScheduled/HearingsScheduled.tsx

@@ -204,7 +204,7 @@ export const HearingsScheduled = () => {
           <HearingImage
             className={`d-block mx-auto`}
             src="/speaker-podium.svg"
-            alt="speaker at podium"
+            alt=""
           />
         </Col>
         <Col md={7}>

components/HeroHeader/HeroHeader.js

@@ -43,7 +43,7 @@ const HeroHeader = ({ authenticated }) => {
                 <Image
                   className={`${styles.statehouse}`}
                   src="/statehouse.svg"
-                  alt="statehouse"
+                  alt=""
                 ></Image>
               </Col>
               <Col

components/HotBillCard/Positions.tsx

@@ -2,32 +2,43 @@ import React from "react"
 import { Container, CardImg } from "react-bootstrap"
 import Image from "react-bootstrap/Image"
 import styled from "styled-components"
+import { useTranslation } from "next-i18next"
 
 export const Positions = (props: {
   endorseCount: number
   opposeCount: number
   neutralCount: number
 }) => {
+  const { t } = useTranslation("testimony")
+
   return (
     <PositionsStyle>
       <PositionStyle>
         <p className="stanceTitle">Endorse</p>
         <div>
-          <Image className="svg" alt="" src="/thumbs-endorse.svg" />
+          <Image className="svg" alt={t("counts.endorsements")} />
           <p>{props.endorseCount}</p>
         </div>
       </PositionStyle>
       <PositionStyle>
         <p className="stanceTitle">Neutral</p>
         <div>
-          <Image className="svg" alt="" src="/thumbs-neutral.svg" />
+          <Image
+            className="svg"
+            alt={t("counts.neutral")}
+            src="/thumbs-neutral.svg"
+          />
           <p>{props.neutralCount}</p>
         </div>
       </PositionStyle>
       <PositionStyle>
         <p className="stanceTitle">Oppose</p>
         <div>
-          <Image className="svg" alt="" src="/thumbs-oppose.svg" />
+          <Image
+            className="svg"
+            alt={t("counts.oppose")}
+            src="/thumbs-oppose.svg"
+          />
           <p>{props.opposeCount}</p>
         </div>
       </PositionStyle>

components/Leaf/Leaf.tsx

@@ -32,7 +32,7 @@ const Leaf = ({
 }) => {
   return (
     <LeafContainer className="w-100">
-      <LeafImage className={position} fluid src="/leaf.svg" alt="leaf" />
+      <LeafImage className={position} fluid src="/leaf.svg" alt="" />
     </LeafContainer>
   )
 }