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, 18 insertions, 4 deletions

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,
 };