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, 25 deletions

diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx
deleted file mode 100644
index 0089c06..0000000
--- a/src/components/molecules/forms/ackee-select.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import user from '@testing-library/user-event';
-import { act, render, screen } from '@test-utils';
-import AckeeSelect from './ackee-select';
-
-describe('Select', () => {
-  it('should correctly set default option', () => {
-    render(<AckeeSelect storageKey="ackee-tracking" initialValue="full" />);
-    expect(screen.getByRole('combobox')).toHaveValue('full');
-    expect(screen.queryByRole('combobox')).not.toHaveValue('partial');
-  });
-
-  it('should correctly change value when user choose another option', async () => {
-    render(<AckeeSelect storageKey="ackee-tracking" initialValue="full" />);
-
-    await act(async () => {
-      await user.selectOptions(
-        screen.getByRole('combobox'),
-        screen.getByRole('option', { name: 'Partial' })
-      );
-    });
-
-    expect(screen.getByRole('combobox')).toHaveValue('partial');
-    expect(screen.queryByRole('combobox')).not.toHaveValue('full');
-  });
-});