From e03d8fa7b05977ed998de466fe77d7f161b06f24 Mon Sep 17 00:00:00 2001
From: Jasper Moelker <jasper@voorhoede.nl>
Date: Sat, 30 Dec 2023 18:15:55 +0100
Subject: [PATCH] fix: linting issues on ConsentForm & SwitchInput

---
 src/components/ConsentForm/ConsentForm.astro | 8 +++++---
 src/components/SwitchInput/SwitchInput.astro | 9 +++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/ConsentForm/ConsentForm.astro b/src/components/ConsentForm/ConsentForm.astro
index ff75065..53104e8 100644
--- a/src/components/ConsentForm/ConsentForm.astro
+++ b/src/components/ConsentForm/ConsentForm.astro
@@ -49,14 +49,15 @@ const groups = [
 ---
 
 <form>
-  <h2>[ Consent form ]</h2>
+  <h1>[ Consent form ]</h1>
   {
     groups.map((group) => (
       <consent-form-group>
         <fieldset>
+          <legend class="a11y-sr-only">{group.title}</legend>
           <details>
             <summary>
-              <legend>{group.title}</legend>
+              <span aria-hidden>{group.title}</span>
               <label for={`consent:${group.key}`} class="a11y-sr-only">
                 {group.title}
               </label>
@@ -91,6 +92,7 @@ const groups = [
       </consent-form-group>
     ))
   }
+  <button type="submit">[ Save preferences ]</button>
 </form>
 
 <script src="./ConsentForm.client.ts"></script>
@@ -114,7 +116,7 @@ const groups = [
     width: 100%;
     background: yellow;
   }
-  legend {
+  summary > span {
     font-weight: bold;
     padding: 10px;
     cursor: pointer;
diff --git a/src/components/SwitchInput/SwitchInput.astro b/src/components/SwitchInput/SwitchInput.astro
index 8b2280b..88d0ca7 100644
--- a/src/components/SwitchInput/SwitchInput.astro
+++ b/src/components/SwitchInput/SwitchInput.astro
@@ -1,7 +1,8 @@
 ---
 interface Props {
-  name: string;
-  checked?: boolean;
+  name?: string;
+  checked?: boolean | string;
+  [key: string]: unknown;
 }
 const { name, checked, ...props } = Astro.props;
 ---
@@ -9,8 +10,8 @@ const { name, checked, ...props } = Astro.props;
 <input
   {...props}
   name={name}
-  checked={checked}
-  role='checkbox'
+  checked={ checked ? 'checked' : undefined }
+  role='switch'
   type='checkbox'
   is='switch-input'
 />