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,13 +100,16 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
       <Heading2 mx="1">{zoneLabel}</Heading2>
       <ItemListContainer>
         <TransitionGroup component={null}>
-          {items.map((item) => (
+          {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={`${zoneLabel}-item-${item.id}-name`}
+                    aria-labelledby={itemNameId}
                     name={zoneLabel}
                     value={item.id}
                     checked={outfitState.wornItemIds.includes(item.id)}
@@ -120,13 +123,14 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
                   />
                   <Item
                     item={item}
-                  itemNameId={`${zoneLabel}-item-${item.id}-name`}
+                    itemNameId={itemNameId}
                     outfitState={outfitState}
                     dispatchToOutfit={dispatchToOutfit}
                   />
                 </label>
               </CSSTransition>
-          ))}
+            );
+          })}
         </TransitionGroup>
       </ItemListContainer>
     </Box>