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.

4 files changed, 32 insertions, 11 deletions

diff --git a/src/components/molecules/modals/tooltip.fixture.tsx b/src/components/molecules/modals/tooltip.fixture.tsx
new file mode 100644
index 0000000..5489f08
--- /dev/null
+++ b/src/components/molecules/modals/tooltip.fixture.tsx
@@ -0,0 +1,4 @@
+export const title = 'Illum eum at';
+export const content =
+  'Non accusantium ad. Est et impedit iste animi voluptas cum accusamus accusantium. Repellat ut sint pariatur cumque cupiditate. Animi occaecati odio ut debitis ipsam similique. Repudiandae aut earum occaecati consequatur laborum ut nobis iusto. Adipisci laboriosam id.';
+export const icon = '?';
diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx
index 06a4855..a3dfa9f 100644
--- a/src/components/molecules/modals/tooltip.stories.tsx
+++ b/src/components/molecules/modals/tooltip.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Tooltip from './tooltip';
+import { content, icon, title } from './tooltip.fixture';
 
 /**
  * Tooltip - Storybook Meta
@@ -21,6 +22,20 @@ export default {
         required: false,
       },
     },
+    cloneClassName: {
+      control: {
+        type: 'text',
+      },
+      description:
+        'Set additional classnames to the tooltip when using cloneElement.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     content: {
       control: {
         type: 'text',
@@ -63,8 +78,7 @@ const Template: ComponentStory<typeof Tooltip> = (args) => (
  */
 export const Help = Template.bind({});
 Help.args = {
-  content:
-    'Minima tempora fuga omnis ratione doloribus ut. Totam ea vitae consequatur. Fuga hic ipsum. In non debitis ex assumenda ut dicta. Sit ut maxime eligendi est.',
-  icon: '?',
-  title: 'Laborum enim vero',
+  content,
+  icon,
+  title,
 };
diff --git a/src/components/molecules/modals/tooltip.test.tsx b/src/components/molecules/modals/tooltip.test.tsx
index 24f20d8..d00b4b1 100644
--- a/src/components/molecules/modals/tooltip.test.tsx
+++ b/src/components/molecules/modals/tooltip.test.tsx
@@ -1,10 +1,6 @@
 import { render, screen } from '@test-utils';
 import Tooltip from './tooltip';
-
-const title = 'Illum eum at';
-const content =
-  'Non accusantium ad. Est et impedit iste animi voluptas cum accusamus accusantium. Repellat ut sint pariatur cumque cupiditate. Animi occaecati odio ut debitis ipsam similique. Repudiandae aut earum occaecati consequatur laborum ut nobis iusto. Adipisci laboriosam id.';
-const icon = '?';
+import { content, icon, title } from './tooltip.fixture';
 
 describe('Tooltip', () => {
   it('renders a title', () => {
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}