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, 3 insertions, 3 deletions

diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index ee61a7b..c18b8ea 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -50,14 +50,14 @@ const Toolbar: FC<ToolbarProps> = ({
       <MainNav
         items={nav}
         isActive={isNavOpened}
-        setIsActive={setIsNavOpened}
+        setIsActive={() => setIsNavOpened(!isNavOpened)}
         className={styles.modal}
         ref={mainNavRef}
       />
       <Search
         searchPage={searchPage}
         isActive={isSearchOpened}
-        setIsActive={setIsSearchOpened}
+        setIsActive={() => setIsSearchOpened(!isSearchOpened)}
         className={`${styles.modal} ${styles['modal--search']}`}
         ref={searchRef}
       />
@@ -67,7 +67,7 @@ const Toolbar: FC<ToolbarProps> = ({
         isActive={isSettingsOpened}
         motionStorageKey={motionStorageKey}
         ref={settingsRef}
-        setIsActive={setIsSettingsOpened}
+        setIsActive={() => setIsSettingsOpened(!isSettingsOpened)}
         tooltipClassName={styles.tooltip}
       />
     </div>