forked from crowetic/commerce
a11y pass
This commit is contained in:
parent
6b69d31bad
commit
f2997c2519
@ -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
|
||||||
/>
|
/>
|
||||||
|
@ -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}
|
||||||
|
@ -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,
|
||||||
|
@ -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}
|
||||||
|
@ -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 && (
|
||||||
|
Loading…
x
Reference in New Issue
Block a user