perf: accessibility improved

deco-sites · Aug 1, 2024 · 4fdf502 · 4fdf502
1 parent 0c60c45
commit 4fdf502
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/components/daisy/Toggle.tsx b/components/daisy/Toggle.tsx
@@ -12,10 +12,22 @@ export default function Toggle(props: Props) {
         ? (
           <label className="label cursor-pointer">
             <span className="label-text">{label}</span>
-            <input type="checkbox" className="toggle" checked={checked} />
+            <input
+              aria-label="toggle button"
+              type="checkbox"
+              className="toggle"
+              checked={checked}
+            />
           </label>
         )
-        : <input type="checkbox" className="toggle" checked={checked} />}
+        : (
+          <input
+            aria-label="toggle button"
+            type="checkbox"
+            className="toggle"
+            checked={checked}
+          />
+        )}
     </div>
   );
 }
diff --git a/components/footer/FooterItems.tsx b/components/footer/FooterItems.tsx
@@ -57,7 +57,11 @@ export default function FooterItems(
               {sections.map((section) => (
                 <li>
                   <div class="collapse collapse-arrow">
-                    <input type="checkbox" class="min-h-[0]" />
+                    <input
+                      aria-label="open collapse"
+                      type="checkbox"
+                      class="min-h-[0]"
+                    />
                     <label
                       htmlFor={section.label}
                       class="collapse-title min-h-[0] !px-0 flex gap-2"

diff --git a/components/header/Menu.tsx b/components/header/Menu.tsx
@@ -29,7 +29,7 @@ export interface Props {
 function MenuItem({ item }: { item: SiteNavigationElement }) {
   return (
     <div class="collapse collapse-arrow">
-      <input type="checkbox" />
+      <input aria-label="toggle menu" type="checkbox" />
       <div class="collapse-title">
         <div class="flex items-center gap-2 w-full">
           <Icon

diff --git a/components/layout/CategoriesShelf.tsx b/components/layout/CategoriesShelf.tsx
@@ -33,6 +33,7 @@ function CategoryCard({ image, label, callToAction }: Category) {
     <div class="flex flex-col items-center justify-between w-full h-[294px]">
       <Image
         src={image}
+        alt={label}
         width={204}
         height={204}
         loading="lazy"

diff --git a/sections/Content/Brands.tsx b/sections/Content/Brands.tsx
@@ -55,7 +55,11 @@ export default function Brands(
               index={index}
               class="carousel-item w-40 h-full"
             >
-              <a href={brand.link} class="border-2 border-gray-300 w-full">
+              <a
+                aria-label={`go to ${brand.description}`}
+                href={brand.link}
+                class="border-2 border-gray-300 w-full"
+              >
                 <Image
                   src={brand.image}
                   width={160 || brand.width}