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, 2 deletions

diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
index efb3009..9801393 100644
--- a/src/components/molecules/modals/tooltip.tsx
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -8,6 +8,10 @@ export type TooltipProps = {
    */
   className?: string;
   /**
+   * Set more additional classnames to the tooltip wrapper. Required when using React.cloneElement.
+   */
+  cloneClassName?: string;
+  /**
    * The tooltip body.
    */
   content: string | string[];
@@ -27,7 +31,7 @@ export type TooltipProps = {
  * Render a tooltip modal.
  */
 const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
-  { className = '', content, icon, title },
+  { cloneClassName = '', className = '', content, icon, title },
   ref
 ) => {
   /**
@@ -43,7 +47,10 @@ const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
   };
 
   return (
-    <div className={`${styles.wrapper} ${className}`} ref={ref}>
+    <div
+      className={`${styles.wrapper} ${cloneClassName} ${className}`}
+      ref={ref}
+    >
       <div className={styles.title}>
         <span className={styles.icon}>{icon}</span>
         {title}