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

diff --git a/src/components/molecules/forms/fieldset.module.scss b/src/components/molecules/forms/fieldset.module.scss
new file mode 100644
index 0000000..3102bf7
--- /dev/null
+++ b/src/components/molecules/forms/fieldset.module.scss
@@ -0,0 +1,61 @@
+.legend {
+  float: left;
+  color: var(--color-primary-darker);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+
+  &#{&}--has-tooltip {
+    padding: 0 var(--spacing-xs) 0 0;
+  }
+}
+
+.btn {
+  margin: 0 var(--spacing-2xs) var(--spacing-2xs) 0;
+
+  &--activated {
+    background: var(--color-primary);
+
+    * {
+      color: var(--color-fg-inverted);
+    }
+  }
+}
+
+.tooltip {
+  top: calc(100% + var(--spacing-xs));
+  transform-origin: top;
+  transition: all 0.75s ease-in-out 0s;
+
+  &--hidden {
+    flex: 0 0 0;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0);
+  }
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+}
+
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  max-width: 100%;
+  padding: 0;
+  position: relative;
+  border: none;
+
+  &--stacked {
+    .body {
+      flex: 1 0 100%;
+    }
+  }
+
+  .tooltip {
+    position: absolute;
+  }
+}