4
0
forked from crowetic/commerce

Add aria attributes (#580)

This commit is contained in:
Gonzalo Pozzo 2021-11-24 14:29:55 -03:00 committed by GitHub
parent c8787865b3
commit 96e990268d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 4 deletions

View File

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

View File

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

View File

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

View File

@ -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 } : {}}