misc a11y fixes

both pages pass Lighthouse now, yay!

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>

src/app/Item.js

@@ -143,7 +143,7 @@ function ItemThumbnail({ src, isWorn }) {
         },
       ])}
     >
-      <Image src={src} />
+      <Image src={src} alt="" />
     </Box>
   );
 }

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) => (
+          {items.map((item) => {
-            <CSSTransition key={item.id} {...fadeOutAndRollUpTransition}>
+            const itemNameId =
-              <label>
+              zoneLabel.replace(/ /g, "-") + `-item-${item.id}-name`;
-                <VisuallyHidden
+            return (
-                  as="input"
+              <CSSTransition key={item.id} {...fadeOutAndRollUpTransition}>
-                  type="radio"
+                <label>
-                  aria-labelledby={`${zoneLabel}-item-${item.id}-name`}
+                  <VisuallyHidden
-                  name={zoneLabel}
+                    as="input"
-                  value={item.id}
+                    type="radio"
-                  checked={outfitState.wornItemIds.includes(item.id)}
+                    aria-labelledby={itemNameId}
-                  onChange={onChange}
+                    name={zoneLabel}
-                  onClick={onClick}
+                    value={item.id}
-                  onKeyUp={(e) => {
+                    checked={outfitState.wornItemIds.includes(item.id)}
-                    if (e.key === " ") {
+                    onChange={onChange}
-                      onClick(e);
+                    onClick={onClick}
-                    }
+                    onKeyUp={(e) => {
-                  }}
+                      if (e.key === " ") {
-                />
+                        onClick(e);
-                <Item
+                      }
-                  item={item}
+                    }}
-                  itemNameId={`${zoneLabel}-item-${item.id}-name`}
+                  />
-                  outfitState={outfitState}
+                  <Item
-                  dispatchToOutfit={dispatchToOutfit}
+                    item={item}
-                />
+                    itemNameId={itemNameId}
-              </label>
+                    outfitState={outfitState}
-            </CSSTransition>
+                    dispatchToOutfit={dispatchToOutfit}
-          ))}
+                  />
+                </label>
+              </CSSTransition>
+            );
+          })}
         </TransitionGroup>
       </ItemListContainer>
     </Box>