fix(core): fix accessibility issues on plp and pdp (#878)

bigcommerce · May 8, 2024 · 613677c · 613677c
1 parent 6e93873
commit 613677c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
@@ -73,7 +73,9 @@ export const Reviews = async ({ productId }: Props) => {
 
       <ul className="lg:grid lg:grid-cols-2 lg:gap-8">
         {reviews.length === 0 ? (
-          <p className="pb-6 pt-1">{t('unreviewed')}</p>
+          <li>
+            <p className="pb-6 pt-1">{t('unreviewed')}</p>
+          </li>
         ) : (
           reviews.map((review) => {
             return (

diff --git a/core/components/product-card/compare.tsx b/core/components/product-card/compare.tsx
@@ -20,7 +20,7 @@ export const Compare = ({
   } | null;
   productName: string;
 }) => {
-  const checkboxId = useId();
+  const labelId = useId();
   const t = useTranslations('Product.ProductSheet');
   const [checkedState, setCheckedState] = useState(false);
   const { products, setProducts } = useCompareProductsContext();
@@ -46,12 +46,12 @@ export const Compare = ({
   return (
     <div className="flex items-center gap-3">
       <Checkbox
+        aria-labelledby={labelId}
         checked={checkedState}
         className="h-4 w-4"
-        id={checkboxId}
         onCheckedChange={handleOnCheckedChange}
       />
-      <Label className="font-normal" htmlFor={checkboxId}>
+      <Label className="font-normal" id={labelId}>
         {t('compare')}
       </Label>
     </div>