From 6158b8667e6c76c5a5a09b480b82d6f04b8e4885 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
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)"
     >
-    <i class="checkbox-indicator" />
+    <i
+      class="checkbox-indicator"
+      :aria-hidden="true"
+    />
     <span
       v-if="!!$slots.default"
       class="label"
@@ -33,6 +36,7 @@ export default {
 
 <style lang="scss">
 @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 @@
 <script src="./screen_reader_notice.js"></script>
 
 <style lang="scss">
+@import "../../mixins";
+
 .screen-reader-text {
-  display: block;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  visibility: visible;
+  @include visible-for-screenreader-only;
 }
 </style>

From 902954b29825647eaf5435c89e379ef4babe7931 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
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 @@
   >
     <input
       type="checkbox"
+      class="visible-for-screenreader-only"
       :disabled="disabled"
       :checked="modelValue"
       :indeterminate="indeterminate"
@@ -85,8 +86,6 @@ export default {
   }
 
   input[type="checkbox"] {
-    @include visible-for-screenreader-only;
-
     &:checked + .checkbox-indicator::before {
       color: $fallback--text;
       color: var(--inputText, $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 1cd908ae0d..8384ae6b1f 100644
--- a/src/components/screen_reader_notice/screen_reader_notice.vue
+++ b/src/components/screen_reader_notice/screen_reader_notice.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="screen-reader-text"
+    class="visible-for-screenreader-only"
     :aria-live="ariaLive"
   >
     {{ currentText }}
@@ -8,11 +8,3 @@
 </template>
 
 <script src="./screen_reader_notice.js"></script>
-
-<style lang="scss">
-@import "../../mixins";
-
-.screen-reader-text {
-  @include visible-for-screenreader-only;
-}
-</style>
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 @@
   >
     <Popover
       trigger="hover"
+      :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
     >
       <template #trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
-          :aria-label="$t('settings.setting_changed')"
         />
       </template>
       <template #content>