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

diff --git a/src/components/molecules/forms/toggle.test.tsx b/src/components/molecules/forms/toggle.test.tsx
deleted file mode 100644
index fb97adc..0000000
--- a/src/components/molecules/forms/toggle.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { render, screen } from '@test-utils';
-import Toggle from './toggle';
-
-const choices = {
-  left: 'On',
-  right: 'Off',
-};
-
-const label = 'Activate this setting:';
-
-describe('Toggle', () => {
-  it('renders a checked toggle', () => {
-    render(
-      <Toggle
-        id="toggle-example"
-        name="toggle-example"
-        choices={choices}
-        label={label}
-        value={true}
-        setValue={(__value) => null}
-      />
-    );
-    expect(
-      screen.getByRole('checkbox', {
-        name: `${label} ${choices.left} ${choices.right}`,
-      })
-    ).toBeChecked();
-  });
-});