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.

8 files changed, 64 insertions, 28 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}
+    />
+  );
 };
 
 /**
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index d205112..5dd32f7 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,4 +1,6 @@
-import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import BooleanField, {
+  type BooleanFieldProps,
+} from '@components/atoms/forms/boolean-field';
 import Label from '@components/atoms/forms/label';
 import Hamburger from '@components/atoms/icons/hamburger';
 import Nav, {
@@ -18,7 +20,7 @@ export type MainNavProps = {
   /**
    * The button state.
    */
-  isActive: CheckboxProps['value'];
+  isActive: BooleanFieldProps['checked'];
   /**
    * The main nav items.
    */
@@ -26,7 +28,7 @@ export type MainNavProps = {
   /**
    * A callback function to handle button state.
    */
-  setIsActive: CheckboxProps['setValue'];
+  setIsActive: BooleanFieldProps['onChange'];
 };
 
 /**
@@ -53,12 +55,14 @@ const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
 
   return (
     <div className={`${sharedStyles.item} ${mainNavStyles.item}`} ref={ref}>
-      <Checkbox
+      <BooleanField
+        checked={isActive}
+        className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`}
         id="main-nav-button"
         name="main-nav-button"
-        value={isActive}
-        setValue={setIsActive}
-        className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`}
+        onChange={setIsActive}
+        type="checkbox"
+        value="open"
       />
       <Label
         htmlFor="main-nav-button"
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index f0f65b4..4baf0bf 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -68,7 +68,15 @@ const Template: ComponentStory<typeof Search> = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return <Search isActive={isOpen} setIsActive={setIsOpen} {...args} />;
+  return (
+    <Search
+      isActive={isOpen}
+      setIsActive={() => {
+        setIsOpen(!isOpen);
+      }}
+      {...args}
+    />
+  );
 };
 
 /**
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 6a8af26..2d4b6b5 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,4 +1,6 @@
-import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import BooleanField, {
+  type BooleanFieldProps,
+} from '@components/atoms/forms/boolean-field';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
 import FlippingLabel from '@components/molecules/forms/flipping-label';
 import useInputAutofocus from '@utils/hooks/use-input-autofocus';
@@ -16,7 +18,7 @@ export type SearchProps = {
   /**
    * The button state.
    */
-  isActive: CheckboxProps['value'];
+  isActive: BooleanFieldProps['checked'];
   /**
    * A callback function to execute search.
    */
@@ -24,7 +26,7 @@ export type SearchProps = {
   /**
    * A callback function to handle button state.
    */
-  setIsActive: CheckboxProps['setValue'];
+  setIsActive: BooleanFieldProps['onChange'];
 };
 
 const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
@@ -53,12 +55,14 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
 
   return (
     <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}>
-      <Checkbox
+      <BooleanField
+        checked={isActive}
+        className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
         id="search-button"
         name="search-button"
-        value={isActive}
-        setValue={setIsActive}
-        className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
+        onChange={setIsActive}
+        type="checkbox"
+        value="open"
       />
       <FlippingLabel
         className={sharedStyles.label}
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 08ec579..20d0b4d 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -92,7 +92,15 @@ const Template: ComponentStory<typeof Settings> = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(isActive);
 
-  return <Settings isActive={isOpen} setIsActive={setIsOpen} {...args} />;
+  return (
+    <Settings
+      isActive={isOpen}
+      setIsActive={() => {
+        setIsOpen(!isOpen);
+      }}
+      {...args}
+    />
+  );
 };
 
 /**
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index ceb6db4..0e7daa2 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,4 +1,6 @@
-import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import BooleanField, {
+  type BooleanFieldProps,
+} from '@components/atoms/forms/boolean-field';
 import Cog from '@components/atoms/icons/cog';
 import FlippingLabel from '@components/molecules/forms/flipping-label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
@@ -13,11 +15,11 @@ export type SettingsProps = SettingsModalProps & {
   /**
    * The button state.
    */
-  isActive: CheckboxProps['value'];
+  isActive: BooleanFieldProps['checked'];
   /**
    * A callback function to handle button state.
    */
-  setIsActive: CheckboxProps['setValue'];
+  setIsActive: BooleanFieldProps['onChange'];
 };
 
 const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
@@ -46,12 +48,14 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
 
   return (
     <div className={`${sharedStyles.item} ${settingsStyles.item}`} ref={ref}>
-      <Checkbox
+      <BooleanField
+        checked={isActive}
+        className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
         id="settings-button"
         name="settings-button"
-        value={isActive}
-        setValue={setIsActive}
-        className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
+        onChange={setIsActive}
+        type="checkbox"
+        value="open"
       />
       <FlippingLabel
         className={sharedStyles.label}
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
index 4bcabcb..ca9cd33 100644
--- a/src/components/organisms/toolbar/toolbar.module.scss
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -40,7 +40,7 @@
     &--settings {
       @include mix.media("screen") {
         @include mix.dimensions("sm") {
-          min-width: 35ch;
+          min-width: 32ch;
         }
       }
     }
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>