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/base/_helpers.scss | |
| 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/base/_helpers.scss')
| -rw-r--r-- | src/styles/base/_helpers.scss | 10 |
1 files changed, 1 insertions, 9 deletions
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; |