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

diff --git a/src/components/molecules/forms/labelled-boolean-field.module.scss b/src/components/molecules/forms/labelled-boolean-field.module.scss
new file mode 100644
index 0000000..10a9eb2
--- /dev/null
+++ b/src/components/molecules/forms/labelled-boolean-field.module.scss
@@ -0,0 +1,15 @@
+.label {
+  &--visible#{&}--left {
+    margin-right: var(--spacing-2xs);
+  }
+
+  &--visible#{&}--right {
+    margin-left: var(--spacing-2xs);
+  }
+}
+
+.wrapper {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: center;
+}