cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Add aria attributes (#580)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/UserNav/UserNav.tsx
View File

@ -28,7 +28,7 @@ const UserNav: FC<Props> = ({ className }) => {
<ul className={s.list}> <ul className={s.list}>
{process.env.COMMERCE_CART_ENABLED && ( {process.env.COMMERCE_CART_ENABLED && (
<li className={s.item}> <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 /> <Bag />
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>} {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
</Button> </Button>

2
components/product/ProductCard/ProductCard.tsx
View File

@ -39,7 +39,7 @@ const ProductCard: FC<Props> = ({
return ( return (
<Link href={`/product/${product.slug}`}> <Link href={`/product/${product.slug}`}>
<a className={rootClassName}> <a className={rootClassName} aria-label={product.name}>
{variant === 'slim' && ( {variant === 'slim' && (
<> <>
<div className={s.header}> <div className={s.header}>

2
components/product/ProductOptions/ProductOptions.tsx
View File

@ -21,7 +21,7 @@ const ProductOptions: React.FC<ProductOptionsProps> = ({
<h2 className="uppercase font-medium text-sm tracking-wide"> <h2 className="uppercase font-medium text-sm tracking-wide">
{opt.displayName} {opt.displayName}
</h2> </h2>
<div className="flex flex-row py-4"> <div role="listbox" className="flex flex-row py-4">
{opt.values.map((v, i: number) => { {opt.values.map((v, i: number) => {
const active = selectedOptions[opt.displayName.toLowerCase()] const active = selectedOptions[opt.displayName.toLowerCase()]
return ( return (

4
components/product/Swatch/Swatch.tsx
View File

@ -42,7 +42,9 @@ const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
return ( return (
<Button <Button
aria-label="Variant Swatch" role="option"
aria-selected={active}
aria-label={(variant && label) ? `${variant} ${label}` : "Variant Swatch"}
className={swatchClassName} className={swatchClassName}
{...(label && color && { title: label })} {...(label && color && { title: label })}
style={color ? { backgroundColor: color } : {}} style={color ? { backgroundColor: color } : {}}