diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-06-01 22:37:56 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-06-01 22:37:56 +0200 |
| commit | 0a33a4658d848fe056715c6da053763407845b2a (patch) | |
| tree | 7c679e54ba4bbadaf0a59bbde780f5742e3b875d /src/styles | |
| parent | 97031a86ca38890e60ecec79828498b7bb13cbfa (diff) | |
| parent | 6be20422494e3806fba3d1c5ad5c3e98bd6e67e5 (diff) | |
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.
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/abstracts/_mixins.scss | 1 | ||||
| -rw-r--r-- | src/styles/abstracts/mixins/_helpers.scss | 13 | ||||
| -rw-r--r-- | src/styles/base/_helpers.scss | 10 |
3 files changed, 15 insertions, 9 deletions
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index a49c848..da77164 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -1 +1,2 @@ +@forward "./mixins/helpers"; @forward "./mixins/media-queries"; 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. */ +} diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss index 3879643..381154f 100644 --- a/src/styles/base/_helpers.scss +++ b/src/styles/base/_helpers.scss @@ -14,15 +14,7 @@ /* Text meant only for screen readers. */ .screen-reader-text { - 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. */ + @include mix.visually-hidden; &:focus { display: block; |