From 6158b8667e6c76c5a5a09b480b82d6f04b8e4885 Mon Sep 17 00:00:00 2001 From: tusooa Date: Sat, 28 Jan 2023 22:10:06 -0500 Subject: [PATCH 1/2] Make checkbox settings accessible --- src/_mixins.scss | 12 ++++++++++++ src/components/checkbox/checkbox.vue | 8 ++++++-- .../screen_reader_notice/screen_reader_notice.vue | 9 +++------ 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/_mixins.scss b/src/_mixins.scss index e99fe26f86..677bc21087 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -16,3 +16,15 @@ @content; } } + +@mixin visible-for-screenreader-only { + display: block; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + visibility: visible; + clip: rect(0 0 0 0); + padding: 0; + position: absolute; +} diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 7139d4fc41..ac7acd5215 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -10,7 +10,10 @@ :indeterminate="indeterminate" @change="$emit('update:modelValue', $event.target.checked)" > - + @import "../../variables"; +@import "../../mixins"; .checkbox { position: relative; @@ -81,7 +85,7 @@ export default { } input[type="checkbox"] { - display: none; + @include visible-for-screenreader-only; &:checked + .checkbox-indicator::before { color: $fallback--text; diff --git a/src/components/screen_reader_notice/screen_reader_notice.vue b/src/components/screen_reader_notice/screen_reader_notice.vue index 5098b94fbd..1cd908ae0d 100644 --- a/src/components/screen_reader_notice/screen_reader_notice.vue +++ b/src/components/screen_reader_notice/screen_reader_notice.vue @@ -10,12 +10,9 @@ From 902954b29825647eaf5435c89e379ef4babe7931 Mon Sep 17 00:00:00 2001 From: tusooa Date: Thu, 9 Feb 2023 21:35:56 -0500 Subject: [PATCH 2/2] Use class to style screenreader-only text --- src/App.scss | 14 ++++++++++++-- src/_mixins.scss | 12 ------------ src/components/checkbox/checkbox.vue | 3 +-- .../screen_reader_notice/screen_reader_notice.vue | 10 +--------- .../settings_modal/helpers/modified_indicator.vue | 2 +- 5 files changed, 15 insertions(+), 26 deletions(-) diff --git a/src/App.scss b/src/App.scss index 1c4c8941bd..3f352e8d91 100644 --- a/src/App.scss +++ b/src/App.scss @@ -580,8 +580,6 @@ textarea, } &[type="checkbox"] { - display: none; - &:checked + label::before { color: $fallback--text; color: var(--inputText, $fallback--text); @@ -887,3 +885,15 @@ option { opacity: 0; } /* stylelint-enable no-descending-specificity */ + +.visible-for-screenreader-only { + display: block; + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + visibility: visible; + clip: rect(0 0 0 0); + padding: 0; + position: absolute; +} diff --git a/src/_mixins.scss b/src/_mixins.scss index 677bc21087..e99fe26f86 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -16,15 +16,3 @@ @content; } } - -@mixin visible-for-screenreader-only { - display: block; - width: 1px; - height: 1px; - margin: -1px; - overflow: hidden; - visibility: visible; - clip: rect(0 0 0 0); - padding: 0; - position: absolute; -} diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index ac7acd5215..42f89be9a3 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -5,6 +5,7 @@ >
{{ currentText }} @@ -8,11 +8,3 @@ - - diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue index 8311533af6..45db3fc2dc 100644 --- a/src/components/settings_modal/helpers/modified_indicator.vue +++ b/src/components/settings_modal/helpers/modified_indicator.vue @@ -5,12 +5,12 @@ >