Update Headless UI; Fix Linting errors

osmberlin · Nov 2, 2024 · 56b5cb9 · 56b5cb9
1 parent 4f7dcb7
commit 56b5cb9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/src/components/project_cqi/page_map/OverlayLayerSelection.tsx b/src/components/project_cqi/page_map/OverlayLayerSelection.tsx
@@ -1,10 +1,5 @@
 import { $searchParams } from '@components/BaseMap/store'
-import {
-  RadioGroup,
-  RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption,
-} from '@headlessui/react'
+import { Description, Label, Radio, RadioGroup } from '@headlessui/react'
 import { useStore } from '@nanostores/react'
 import { useEffect, useState } from 'react'
 import { twJoin } from 'tailwind-merge'
@@ -36,10 +31,13 @@ export const OverlayLayerSelection = () => {
   }
 
   return (
-    <RadioGroup value={localSelected} onChange={handleChange}>
-      <RadioGroupLabel className="sr-only">Filterung der Karte ändern</RadioGroupLabel>
+    <RadioGroup
+      value={localSelected}
+      onChange={handleChange}
+      aria-label="Filterung der Karte ändern"
+    >
       {layerSelection.map(({ key, name, description }) => (
-        <RadioGroupOption
+        <Radio
           key={key}
           value={key}
           className={({ checked }) =>
@@ -65,31 +63,31 @@ export const OverlayLayerSelection = () => {
                 <span className="h-1.5 w-1.5 rounded-full bg-white" />
               </span>
               <span className="ml-3 flex flex-col">
-                <RadioGroupLabel
+                <Label
                   as="div"
                   className={twJoin(
                     checked ? 'font-medium text-emerald-900' : 'font-normal text-gray-900',
                     'text-sm',
                   )}
                 >
                   {name}
-                </RadioGroupLabel>
+                </Label>
 
                 {checked && (
-                  <RadioGroupDescription
+                  <Description
                     as="span"
                     className={twJoin(
                       checked ? 'text-emerald-700' : 'text-gray-500',
                       'block text-sm',
                     )}
                   >
                     {description}
-                  </RadioGroupDescription>
+                  </Description>
                 )}
               </span>
             </>
           )}
-        </RadioGroupOption>
+        </Radio>
       ))}
     </RadioGroup>
   )

diff --git a/src/components/text/Video.astro b/src/components/text/Video.astro
@@ -6,4 +6,4 @@ type Props = {
 const { src } = Astro.props
 ---
 
-<iframe class="mt-10 aspect-video w-full" src={src} frameborder="0" allowfullscreen></iframe>
+<iframe class="mt-10 aspect-video w-full" src={src} allowfullscreen></iframe>