misc a11y fixes

both pages pass Lighthouse now, yay!
This commit is contained in:
Matt Dunn-Rankin 2020-05-18 01:21:46 -07:00
parent 3f379a819f
commit 8e6c9a3d98
3 changed files with 42 additions and 29 deletions

View file

@ -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>

View file

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

View file

@ -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>