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, 8 insertions, 9 deletions

diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx
index 43d546e..584261d 100644
--- a/src/components/organisms/forms/settings-form.test.tsx
+++ b/src/components/organisms/forms/settings-form.test.tsx
@@ -1,9 +1,8 @@
+import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
 import { render, screen } from '@test-utils';
 import SettingsForm from './settings-form';
 
-const ackeeStorageKey = 'ackee-tracking';
-const motionStorageKey = 'reduce-motion';
-
 describe('SettingsForm', () => {
   it('renders a form', () => {
     render(
@@ -17,7 +16,7 @@ describe('SettingsForm', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders a theme toggle setting', () => {
+  it('renders a theme setting', () => {
     render(
       <SettingsForm
         ackeeStorageKey={ackeeStorageKey}
@@ -25,11 +24,11 @@ describe('SettingsForm', () => {
       />
     );
     expect(
-      screen.getByRole('checkbox', { name: /^Theme:/i })
+      screen.getByRole('radiogroup', { name: /^Theme:/i })
     ).toBeInTheDocument();
   });
 
-  it('renders a code blocks toggle setting', () => {
+  it('renders a code blocks setting', () => {
     render(
       <SettingsForm
         ackeeStorageKey={ackeeStorageKey}
@@ -37,7 +36,7 @@ describe('SettingsForm', () => {
       />
     );
     expect(
-      screen.getByRole('checkbox', { name: /^Code blocks:/i })
+      screen.getByRole('radiogroup', { name: /^Code blocks:/i })
     ).toBeInTheDocument();
   });
 
@@ -49,7 +48,7 @@ describe('SettingsForm', () => {
       />
     );
     expect(
-      screen.getByRole('checkbox', { name: /^Animations:/i })
+      screen.getByRole('radiogroup', { name: /^Animations:/i })
     ).toBeInTheDocument();
   });
 
@@ -61,7 +60,7 @@ describe('SettingsForm', () => {
       />
     );
     expect(
-      screen.getByRole('combobox', { name: /^Tracking:/i })
+      screen.getByRole('radiogroup', { name: /^Tracking:/i })
     ).toBeInTheDocument();
   });
 });