From 8e6c9a3d98c74e35e110f4fbe497c6aa68b3100d Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Mon, 18 May 2020 01:21:46 -0700
Subject: [PATCH] misc a11y fixes

both pages pass Lighthouse now, yay!
---
 src/app/HomePage.js   | 11 +++++++-
 src/app/Item.js       |  2 +-
 src/app/ItemsPanel.js | 58 +++++++++++++++++++++++--------------------
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index d75ceaf..0ad9cba 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -81,7 +81,13 @@ function StartOutfitForm() {
           }}
         />
         <Box width="4" />
-        <Button type="submit" variantColor="green" disabled={!isValid}>
+        <Button
+          type="submit"
+          variantColor="green"
+          disabled={!isValid}
+          backgroundColor="green.600" // for AA contrast
+          _hover={{ backgroundColor: "green.700" }}
+        >
           Start
         </Button>
       </Flex>
@@ -158,6 +164,7 @@ function SubmitPetForm() {
           onChange={(e) => setPetName(e.target.value)}
           isDisabled={loading}
           placeholder="Enter a pet's name"
+          aria-label="Enter a pet's name"
           borderColor="green.600"
           _hover={{ borderColor: "green.400" }}
           boxShadow="md"
@@ -174,6 +181,8 @@ function SubmitPetForm() {
           variantColor="green"
           isDisabled={!petName}
           isLoading={loading}
+          backgroundColor="green.600" // for AA contrast
+          _hover={{ backgroundColor: "green.700" }}
         >
           Start
         </Button>
diff --git a/src/app/Item.js b/src/app/Item.js
index 42593bf..2c42c0b 100644
--- a/src/app/Item.js
+++ b/src/app/Item.js
@@ -143,7 +143,7 @@ function ItemThumbnail({ src, isWorn }) {
         },
       ])}
     >
-      <Image src={src} />
+      <Image src={src} alt="" />
     </Box>
   );
 }
diff --git a/src/app/ItemsPanel.js b/src/app/ItemsPanel.js
index 1b850cf..bb91385 100644
--- a/src/app/ItemsPanel.js
+++ b/src/app/ItemsPanel.js
@@ -100,33 +100,37 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
       <Heading2 mx="1">{zoneLabel}</Heading2>
       <ItemListContainer>
         <TransitionGroup component={null}>
-          {items.map((item) => (
-            <CSSTransition key={item.id} {...fadeOutAndRollUpTransition}>
-              <label>
-                <VisuallyHidden
-                  as="input"
-                  type="radio"
-                  aria-labelledby={`${zoneLabel}-item-${item.id}-name`}
-                  name={zoneLabel}
-                  value={item.id}
-                  checked={outfitState.wornItemIds.includes(item.id)}
-                  onChange={onChange}
-                  onClick={onClick}
-                  onKeyUp={(e) => {
-                    if (e.key === " ") {
-                      onClick(e);
-                    }
-                  }}
-                />
-                <Item
-                  item={item}
-                  itemNameId={`${zoneLabel}-item-${item.id}-name`}
-                  outfitState={outfitState}
-                  dispatchToOutfit={dispatchToOutfit}
-                />
-              </label>
-            </CSSTransition>
-          ))}
+          {items.map((item) => {
+            const itemNameId =
+              zoneLabel.replace(/ /g, "-") + `-item-${item.id}-name`;
+            return (
+              <CSSTransition key={item.id} {...fadeOutAndRollUpTransition}>
+                <label>
+                  <VisuallyHidden
+                    as="input"
+                    type="radio"
+                    aria-labelledby={itemNameId}
+                    name={zoneLabel}
+                    value={item.id}
+                    checked={outfitState.wornItemIds.includes(item.id)}
+                    onChange={onChange}
+                    onClick={onClick}
+                    onKeyUp={(e) => {
+                      if (e.key === " ") {
+                        onClick(e);
+                      }
+                    }}
+                  />
+                  <Item
+                    item={item}
+                    itemNameId={itemNameId}
+                    outfitState={outfitState}
+                    dispatchToOutfit={dispatchToOutfit}
+                  />
+                </label>
+              </CSSTransition>
+            );
+          })}
         </TransitionGroup>
       </ItemListContainer>
     </Box>