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, 28 insertions, 12 deletions

diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
index e9939bd..541ca8e 100644
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MotionToggleComponent from './motion-toggle';
+import { storageKey } from './motion-toggle.fixture';
 
 /**
  * MotionToggle - Storybook Meta
@@ -8,11 +9,11 @@ export default {
   title: 'Molecules/Forms/Toggle',
   component: MotionToggleComponent,
   argTypes: {
-    className: {
+    bodyClassName: {
       control: {
         type: 'text',
       },
-      description: 'Set additional classnames to the toggle wrapper.',
+      description: 'Set additional classnames to the fieldset body wrapper.',
       table: {
         category: 'Styles',
       },
@@ -21,11 +22,22 @@ export default {
         required: false,
       },
     },
-    labelClassName: {
+    defaultValue: {
+      control: {
+        type: 'select',
+      },
+      description: 'Set the default value.',
+      options: ['on', 'off'],
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    groupClassName: {
       control: {
         type: 'text',
       },
-      description: 'Set additional classnames to the label wrapper.',
+      description: 'Set additional classnames to the radio group wrapper.',
       table: {
         category: 'Styles',
       },
@@ -34,23 +46,26 @@ export default {
         required: false,
       },
     },
-    storageKey: {
+    legendClassName: {
       control: {
         type: 'text',
       },
-      description: 'Set local storage key.',
+      description: 'Set additional classnames to the legend.',
+      table: {
+        category: 'Styles',
+      },
       type: {
         name: 'string',
-        required: true,
+        required: false,
       },
     },
-    value: {
+    storageKey: {
       control: {
-        type: null,
+        type: 'text',
       },
-      description: 'The reduce motion value.',
+      description: 'Set local storage key.',
       type: {
-        name: 'boolean',
+        name: 'string',
         required: true,
       },
     },
@@ -66,5 +81,6 @@ const Template: ComponentStory<typeof MotionToggleComponent> = (args) => (
  */
 export const Motion = Template.bind({});
 Motion.args = {
-  value: false,
+  defaultValue: 'on',
+  storageKey,
 };