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, 0 insertions, 46 deletions

diff --git a/src/components/atoms/forms/checkbox.tsx b/src/components/atoms/forms/checkbox.tsx
deleted file mode 100644
index aec97f0..0000000
--- a/src/components/atoms/forms/checkbox.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC, SetStateAction } from 'react';
-
-export type CheckboxProps = {
-  /**
-   * One or more ids that refers to the checkbox name.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Add classnames to the checkbox.
-   */
-  className?: string;
-  /**
-   * Checkbox id attribute.
-   */
-  id: string;
-  /**
-   * Checkbox name attribute.
-   */
-  name: string;
-  /**
-   * Callback function to set checkbox value.
-   */
-  setValue: (value: SetStateAction<boolean>) => void;
-  /**
-   * Checkbox value.
-   */
-  value: boolean;
-};
-
-/**
- * Checkbox component
- *
- * Render a checkbox type input.
- */
-const Checkbox: FC<CheckboxProps> = ({ value, setValue, ...props }) => {
-  return (
-    <input
-      type="checkbox"
-      checked={value}
-      onChange={() => setValue(!value)}
-      {...props}
-    />
-  );
-};
-
-export default Checkbox;