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

diff --git a/src/styles/abstracts/mixins/_helpers.scss b/src/styles/abstracts/mixins/_helpers.scss
new file mode 100644
index 0000000..427ea4b
--- /dev/null
+++ b/src/styles/abstracts/mixins/_helpers.scss
@@ -0,0 +1,13 @@
+@use "../functions" as fun;
+
+@mixin visually-hidden {
+  width: fun.convert-px(1);
+  height: fun.convert-px(1);
+  padding: 0;
+  position: absolute !important;
+  overflow: hidden;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  word-break: normal;
+  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+}