From fe0271c37093955c42420c3538203793582de418 Mon Sep 17 00:00:00 2001 From: Salzmann Sandro ssalzman Date: Sat, 14 Oct 2023 00:13:38 +0200 Subject: [PATCH] feat: use headlessui's disclosure to improve keyboard navigation --- src/library/accordeon/accordeon.tsx | 37 ++++++++++++----------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/library/accordeon/accordeon.tsx b/src/library/accordeon/accordeon.tsx index 96d80f5..ab14e74 100644 --- a/src/library/accordeon/accordeon.tsx +++ b/src/library/accordeon/accordeon.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { Disclosure } from "@headlessui/react"; import { ReactElement } from "../types"; interface AccordeonProps { @@ -12,28 +12,21 @@ export const Accordeon = ({ className = "", children, }: AccordeonProps) => { - const [isOpen, setIsOpen] = useState(false); - - const onTitleClick = () => { - setIsOpen((isOpen) => !isOpen); - }; - return ( -
-
- - {isOpen ? "expand_less" : "expand_more"} - - {title} -
- {isOpen && ( -
- {children} -
+ + {({ open }) => ( + <> + + + {open ? "expand_less" : "expand_more"} + + {title} + + + {children} + + )} -
+ ); };