forked from crowetic/commerce
Add aria attributes (#580)
This commit is contained in:
parent
c8787865b3
commit
96e990268d
@ -28,7 +28,7 @@ const UserNav: FC<Props> = ({ className }) => {
|
||||
<ul className={s.list}>
|
||||
{process.env.COMMERCE_CART_ENABLED && (
|
||||
<li className={s.item}>
|
||||
<Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
|
||||
<Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label={`Cart items: ${itemsCount}`}>
|
||||
<Bag />
|
||||
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||
</Button>
|
||||
|
@ -39,7 +39,7 @@ const ProductCard: FC<Props> = ({
|
||||
|
||||
return (
|
||||
<Link href={`/product/${product.slug}`}>
|
||||
<a className={rootClassName}>
|
||||
<a className={rootClassName} aria-label={product.name}>
|
||||
{variant === 'slim' && (
|
||||
<>
|
||||
<div className={s.header}>
|
||||
|
@ -21,7 +21,7 @@ const ProductOptions: React.FC<ProductOptionsProps> = ({
|
||||
<h2 className="uppercase font-medium text-sm tracking-wide">
|
||||
{opt.displayName}
|
||||
</h2>
|
||||
<div className="flex flex-row py-4">
|
||||
<div role="listbox" className="flex flex-row py-4">
|
||||
{opt.values.map((v, i: number) => {
|
||||
const active = selectedOptions[opt.displayName.toLowerCase()]
|
||||
return (
|
||||
|
@ -42,7 +42,9 @@ const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
|
||||
|
||||
return (
|
||||
<Button
|
||||
aria-label="Variant Swatch"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
aria-label={(variant && label) ? `${variant} ${label}` : "Variant Swatch"}
|
||||
className={swatchClassName}
|
||||
{...(label && color && { title: label })}
|
||||
style={color ? { backgroundColor: color } : {}}
|
||||
|
Loading…
x
Reference in New Issue
Block a user