From 84b01b0066089ec60c4acb0b1bcb292423fbf688 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Tue, 11 Aug 2020 13:42:55 -0400
Subject: [PATCH] Header+Footer: add empty img alt-text to satisfy Lighthouse

---
 src/components/Footer/Footer.tsx |   7 +-
 src/components/Header/Header.tsx | 367 ++++++++++++++++---------------
 2 files changed, 199 insertions(+), 175 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index a58ef91..a76de6f 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -71,6 +71,7 @@ const Footer: React.FC<FooterProps> = () => {
         <div id="back-to-top">
           <button
             id="back-to-top-button"
+            aria-label="back-to-top button"
             className="main-button"
             onClick={() => {
               document
@@ -81,7 +82,6 @@ const Footer: React.FC<FooterProps> = () => {
             <img src={uArrowUpLeft} alt="" />
           </button>
         </div>
-        <img id="marker-green" src={markerGreen} alt="" />
         <AnimatePresence>
           {hovered === "phone" ? (
             <motion.img
@@ -95,6 +95,7 @@ const Footer: React.FC<FooterProps> = () => {
               // onHoverStart={() => setHovered("phone")}
               onHoverEnd={clearHover}
               src={phoneSpec}
+              alt=""
             />
           ) : (
             <motion.img
@@ -108,6 +109,7 @@ const Footer: React.FC<FooterProps> = () => {
               onHoverStart={() => setHovered("phone")}
               // onHoverEnd={clearHover}
               src={phone}
+              alt=""
             />
           )}
           {hovered === "command" ? (
@@ -122,6 +124,7 @@ const Footer: React.FC<FooterProps> = () => {
               // onHoverStart={() => setHovered("command")}
               onHoverEnd={clearHover}
               src={commandKeySpec}
+              alt=""
             />
           ) : (
             <motion.img
@@ -135,9 +138,11 @@ const Footer: React.FC<FooterProps> = () => {
               onHoverStart={() => setHovered("command")}
               // onHoverEnd={clearHover}
               src={commandKey}
+              alt=""
             />
           )}
         </AnimatePresence>
+        <img id="marker-green" src={markerGreen} alt="" />
       </div>
     </footer>
   );
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index e0df024..efff3d3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { ArrowUpRightCircle } from "phosphor-react";
 
 import markerPurple from "../../assets/marker-purple.svg";
 import paperclips from "../../assets/paperclips.svg";
@@ -16,7 +17,6 @@ import receiptSpec from "../../assets/receipt-spec.svg";
 import calculator from "../../assets/calculator.svg";
 import calculatorSpec from "../../assets/calculator-spec.svg";
 import "./Header.css";
-import { ArrowUpRightCircle } from "phosphor-react";
 
 type HeaderProps = {};
 
@@ -38,7 +38,6 @@ const handleScrollToIcons = () => {
 const Header: React.FC<HeaderProps> = () => {
   const [hovered, setHovered] = useState<string | false>(false);
   const clearHover = () => setHovered(false);
-  // const handleScrollToIcons = () => {};
 
   return (
     <header>
@@ -49,195 +48,41 @@ const Header: React.FC<HeaderProps> = () => {
         // animate="visible"
         transition={{ duration: 2 }}
       >
-        <img src={markerPurple} id="marker-purple" />
-        <img src={paperclips} id="paperclips" />
-        <AnimatePresence>
-          {hovered === "tablet" ? (
-            <motion.img
-              id="tablet"
-              key="tablet-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("tablet")}
-              onHoverEnd={clearHover}
-              src={tabletSpec}
-            />
-          ) : (
-            <motion.img
-              id="tablet"
-              key="tablet"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("tablet")}
-              // onHoverEnd={clearHover}
-              src={tablet}
-            />
-          )}
-          {hovered === "billiard-ball" ? (
-            <motion.img
-              id="billiard-ball"
-              key="billiard-ball-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("billiard-ball")}
-              onHoverEnd={clearHover}
-              src={billiardBallSpec}
-            />
-          ) : (
-            <motion.img
-              id="billiard-ball"
-              key="billiard-ball"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("billiard-ball")}
-              // onHoverEnd={clearHover}
-              src={billiardBall}
-            />
-          )}
-          {hovered === "warning" ? (
-            <motion.img
-              id="warning"
-              key="warning-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("warning")}
-              onHoverEnd={clearHover}
-              src={warningSpec}
-            />
-          ) : (
-            <motion.img
-              id="warning"
-              key="warning"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("warning")}
-              // onHoverEnd={clearHover}
-              src={warning}
-            />
-          )}
-          {hovered === "cutting-mat" ? (
-            <motion.img
-              id="cutting-mat"
-              key="cutting-mat-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("cutting-mat")}
-              onHoverEnd={clearHover}
-              src={cuttingMatSpec}
-            />
-          ) : (
-            <motion.img
-              id="cutting-mat"
-              key="cutting-mat"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("cutting-mat")}
-              // onHoverEnd={clearHover}
-              src={cuttingMat}
-            />
-          )}
-          {hovered === "receipt" ? (
-            <motion.img
-              id="receipt"
-              key="receipt-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("receipt")}
-              onHoverEnd={clearHover}
-              src={receiptSpec}
-            />
-          ) : (
-            <motion.img
-              id="receipt"
-              key="receipt"
-              className="inspectable"
-              initial="visible"
-              variants={variants}
-              onHoverStart={() => setHovered("receipt")}
-              // onHoverEnd={clearHover}
-              src={receipt}
-            />
-          )}
-          {hovered === "calculator" ? (
-            <motion.img
-              id="calculator"
-              key="calculator-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("calculator")}
-              onHoverEnd={clearHover}
-              src={calculatorSpec}
-            />
-          ) : (
-            <motion.img
-              id="calculator"
-              key="calculator"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("calculator")}
-              // onHoverEnd={clearHover}
-              src={calculator}
-            />
-          )}
-        </AnimatePresence>
+        <img src={markerPurple} id="marker-purple" alt="" />
+        <img src={paperclips} id="paperclips" alt="" />
         <div className="intro">
           <h2>
             Phosphor Icons is a flexible icon family for interfaces, diagrams,
-            presentations – whatever really.
+            presentations — whatever really.
           </h2>
-          <div style={{ display: "flex" }}>
+          <div style={{ display: "flex", flexWrap: "wrap" }}>
             <button className="main-button" onClick={handleGetStarted}>
-              Get started{" "}
-              <ArrowUpRightCircle size={24} weight="fill" style={{ marginLeft: 12 }} />
+              <ArrowUpRightCircle
+                size={24}
+                weight="fill"
+                style={{ marginRight: 12 }}
+              />
+              Go to docs
             </button>
 
             <button className="main-button" onClick={handleScrollToIcons}>
-              {/* <ArrowUpRightCircle size={24} style={{ marginRight: 12 }} />{" "} */}
+              <ArrowUpRightCircle
+                size={24}
+                weight="fill"
+                style={{ marginRight: 12 }}
+              />
               Explore icons
             </button>
           </div>
           <div className="links">
-            <a
+            {/* <a
               className="nav-link"
               href="https://github.com/rektdeckard/phosphor-web#phosphor-icons"
             >
               Docs
-            </a>
+            </a> */}
             <a className="nav-link" href="#">
-              Download
+              Download all
             </a>
             <a
               className="nav-link"
@@ -256,6 +101,180 @@ const Header: React.FC<HeaderProps> = () => {
             </a>
           </div>
         </div>
+        <AnimatePresence>
+          {hovered === "tablet" ? (
+            <motion.img
+              id="tablet"
+              key="tablet-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("tablet")}
+              onHoverEnd={clearHover}
+              src={tabletSpec}
+              alt=""
+            />
+          ) : (
+            <motion.img
+              id="tablet"
+              key="tablet"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("tablet")}
+              // onHoverEnd={clearHover}
+              src={tablet}
+              alt=""
+            />
+          )}
+          {hovered === "billiard-ball" ? (
+            <motion.img
+              id="billiard-ball"
+              key="billiard-ball-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("billiard-ball")}
+              onHoverEnd={clearHover}
+              src={billiardBallSpec}
+              alt=""
+            />
+          ) : (
+            <motion.img
+              id="billiard-ball"
+              key="billiard-ball"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("billiard-ball")}
+              // onHoverEnd={clearHover}
+              src={billiardBall}
+              alt=""
+            />
+          )}
+          {hovered === "warning" ? (
+            <motion.img
+              id="warning"
+              key="warning-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("warning")}
+              onHoverEnd={clearHover}
+              src={warningSpec}
+              alt=""
+            />
+          ) : (
+            <motion.img
+              id="warning"
+              key="warning"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("warning")}
+              // onHoverEnd={clearHover}
+              src={warning}
+              alt=""
+            />
+          )}
+          {hovered === "cutting-mat" ? (
+            <motion.img
+              id="cutting-mat"
+              key="cutting-mat-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("cutting-mat")}
+              onHoverEnd={clearHover}
+              src={cuttingMatSpec}
+              alt=""
+            />
+          ) : (
+            <motion.img
+              id="cutting-mat"
+              key="cutting-mat"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("cutting-mat")}
+              // onHoverEnd={clearHover}
+              src={cuttingMat}
+              alt=""
+            />
+          )}
+          {hovered === "receipt" ? (
+            <motion.img
+              id="receipt"
+              key="receipt-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("receipt")}
+              onHoverEnd={clearHover}
+              src={receiptSpec}
+              alt=""
+            />
+          ) : (
+            <motion.img
+              id="receipt"
+              key="receipt"
+              className="inspectable"
+              initial="visible"
+              variants={variants}
+              onHoverStart={() => setHovered("receipt")}
+              // onHoverEnd={clearHover}
+              src={receipt}
+              alt=""
+            />
+          )}
+          {hovered === "calculator" ? (
+            <motion.img
+              id="calculator"
+              key="calculator-spec"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              // onHoverStart={() => setHovered("calculator")}
+              onHoverEnd={clearHover}
+              src={calculatorSpec}
+              alt=""
+            />
+          ) : (
+            <motion.img
+              id="calculator"
+              key="calculator"
+              className="inspectable"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={variants}
+              onHoverStart={() => setHovered("calculator")}
+              // onHoverEnd={clearHover}
+              src={calculator}
+              alt=""
+            />
+          )}
+        </AnimatePresence>
       </motion.div>
     </header>
   );