fix: linting issues on ConsentForm & SwitchInput

voorhoede · Dec 30, 2023 · e03d8fa · e03d8fa
1 parent 6d079d4
commit e03d8fa
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -1,16 +1,17 @@
 ---
 interface Props {
-  name: string;
-  checked?: boolean;
+  name?: string;
+  checked?: boolean | string;
+  [key: string]: unknown;
 }
 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'
 />