chore(a11y): improve website settings accessibility (#17)

The previous switch buttons (using checkbox) was not a11y compliant. So I change my approach to use radio buttons and to clearly separate the two different states. I also convert the Ackee select setting to improve consistency between settings.

1 files changed, 9 insertions, 1 deletions

diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 831636f..7d6d915 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -63,7 +63,15 @@ const Template: ComponentStory<typeof MainNav> = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return <MainNav isActive={isOpen} setIsActive={setIsOpen} {...args} />;
+  return (
+    <MainNav
+      isActive={isOpen}
+      setIsActive={() => {
+        setIsOpen(!isOpen);
+      }}
+      {...args}
+    />
+  );
 };
 
 /**