crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 21:21:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

add roles and aria-selected to the product page's swatches

Browse Source 
Currently for a user with a screen reader it would be near impossible to use this page. This change will read clearly what the swatch is and for what group it belongs.
This commit is contained in:
Brendan Offer 2021-04-12 20:55:32 -04:00
parent 936f149fcc
commit 1c3bd853fb
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -104,7 +104,7 @@ const ProductView: FC<Props> = ({ product }) => {
{product.options?.map((opt) => ( {product.options?.map((opt) => (
<div className="pb-4" key={opt.displayName}> <div className="pb-4" key={opt.displayName}>
<h2 className="uppercase font-medium">{opt.displayName}</h2> <h2 className="uppercase font-medium">{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) => { {opt.values.map((v, i: number) => {
const active = (choices as any)[ const active = (choices as any)[
opt.displayName.toLowerCase() opt.displayName.toLowerCase()

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

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