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

diff --git a/src/components/molecules/forms/radio-group.fixture.tsx b/src/components/molecules/forms/radio-group.fixture.tsx
new file mode 100644
index 0000000..686467c
--- /dev/null
+++ b/src/components/molecules/forms/radio-group.fixture.tsx
@@ -0,0 +1,47 @@
+import { RadioGroupOption } from './radio-group';
+
+export const getOptions = (name: string = 'group1') => {
+  const value1 = 'option1';
+  const value2 = 'option2';
+  const value3 = 'option3';
+  const value4 = 'option4';
+  const value5 = 'option5';
+
+  const options: RadioGroupOption[] = [
+    {
+      id: `${name}-${value1}`,
+      name: name,
+      label: 'Option 1',
+      value: value1,
+    },
+    {
+      id: `${name}-${value2}`,
+      name: name,
+      label: 'Option 2',
+      value: value2,
+    },
+    {
+      id: `${name}-${value3}`,
+      name: name,
+      label: 'Option 3',
+      value: value3,
+    },
+    {
+      id: `${name}-${value4}`,
+      name: name,
+      label: 'Option 4',
+      value: value4,
+    },
+    {
+      id: `${name}-${value5}`,
+      name: name,
+      label: 'Option 5',
+      value: value5,
+    },
+  ];
+
+  return options;
+};
+
+export const initialChoice = 'option2';
+export const legend = 'Options:';