fix accessibility for home page

deco-sites · Feb 27, 2024 · 2354be5 · 2354be5 · deno-deploy · Feb 27, 2024
1 parent 723d94d
commit 2354be5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/components/footer/FooterItems.tsx b/components/footer/FooterItems.tsx
@@ -48,7 +48,7 @@ export default function FooterItems(
             {sections.map((section) => (
               <li>
                 <div class="collapse collapse-arrow ">
-                  <input type="checkbox" class="min-h-[0]" />
+                  <input id={section.label} type="checkbox" class="min-h-[0]" />
                   <label
                     htmlFor={section.label}
                     class="collapse-title min-h-[0] !p-0 flex gap-2"

diff --git a/components/footer/RegionSelector.tsx b/components/footer/RegionSelector.tsx
@@ -19,15 +19,21 @@ export default function RegionSelector(
           {content?.currency?.length > 0 && (
             <>
               <label for="currency" class="sr-only">Currency</label>
-              <select class="select select-bordered select-sm h-10">
+              <select
+                id="currency"
+                class="select select-bordered select-sm h-10"
+              >
                 {content.currency.map((crr) => <option>{crr.label}</option>)}
               </select>
             </>
           )}
           {content?.language?.length > 0 && (
             <>
               <label for="language" class="sr-only">Language</label>
-              <select class="select select-bordered select-sm h-10">
+              <select
+                id="language"
+                class="select select-bordered select-sm h-10"
+              >
                 {content.language.map((lng) => <option>{lng.label}</option>)}
               </select>
             </>

diff --git a/components/header/Drawers.tsx b/components/header/Drawers.tsx
@@ -35,7 +35,7 @@ const Aside = (
         <span class="font-medium text-2xl">{title}</span>
       </h1>
       {onClose && (
-        <Button class="btn btn-ghost" onClick={onClose}>
+        <Button aria-label="X" class="btn btn-ghost" onClick={onClose}>
           <Icon id="XMark" size={24} strokeWidth={2} />
         </Button>
       )}