4
0
forked from crowetic/commerce

a11y pass

This commit is contained in:
Belen Curcio 2020-10-25 10:57:59 -03:00
parent 6b69d31bad
commit f2997c2519
5 changed files with 13 additions and 1 deletions

View File

@ -63,6 +63,7 @@ const CartItem = ({
src={item.image_url} src={item.image_url}
width={150} width={150}
height={150} height={150}
alt="Product Image"
// The cart item image is already optimized and very small in size // The cart item image is already optimized and very small in size
unoptimized unoptimized
/> />

View File

@ -36,6 +36,7 @@ const ProductCard: FC<Props> = ({
</div> </div>
<Image <Image
src={src} src={src}
alt={p.name}
width={imgWidth} width={imgWidth}
height={imgHeight} height={imgHeight}
priority={priority} priority={priority}
@ -64,6 +65,7 @@ const ProductCard: FC<Props> = ({
</div> </div>
<div className={cn(s.imageContainer)}> <div className={cn(s.imageContainer)}>
<Image <Image
alt={p.name}
className={cn('w-full object-cover', s['product-image'])} className={cn('w-full object-cover', s['product-image'])}
src={src} src={src}
width={imgWidth} width={imgWidth}

View File

@ -19,10 +19,15 @@ const ProductSlider: FC = ({ children }) => {
return ( return (
<div className={s.root}> <div className={s.root}>
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev} /> <button
className={cn(s.leftControl, s.control)}
onClick={slider?.prev}
aria-label="Previous Product Image"
/>
<button <button
className={cn(s.rightControl, s.control)} className={cn(s.rightControl, s.control)}
onClick={slider?.next} onClick={slider?.next}
aria-label="Next Product Image"
/> />
<div <div
ref={ref} ref={ref}
@ -50,6 +55,7 @@ const ProductSlider: FC = ({ children }) => {
{[...Array(slider.details().size).keys()].map((idx) => { {[...Array(slider.details().size).keys()].map((idx) => {
return ( return (
<button <button
aria-label="Position indicator"
key={idx} key={idx}
className={cn(s.positionIndicator, { className={cn(s.positionIndicator, {
[s.positionIndicatorActive]: currentSlide === idx, [s.positionIndicatorActive]: currentSlide === idx,

View File

@ -80,6 +80,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
{product.images.edges?.map((image, i) => ( {product.images.edges?.map((image, i) => (
<div key={image?.node.urlXL} className={s.imageContainer}> <div key={image?.node.urlXL} className={s.imageContainer}>
<Image <Image
alt={product.name}
className={s.img} className={s.img}
src={image?.node.urlXL!} src={image?.node.urlXL!}
width={1050} width={1050}
@ -131,6 +132,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
</section> </section>
<div> <div>
<Button <Button
aria-label="Add to Cart"
type="button" type="button"
className={s.button} className={s.button}
onClick={addToCart} onClick={addToCart}

View File

@ -39,6 +39,7 @@ const Swatch: FC<Props & ButtonProps> = ({
<Button <Button
className={rootClassName} className={rootClassName}
style={color ? { backgroundColor: color } : {}} style={color ? { backgroundColor: color } : {}}
aria-label="Variant Swatch"
{...props} {...props}
> >
{variant === 'color' && active && ( {variant === 'color' && active && (