pleroma-fe

commit: 6158b8667e6c76c5a5a09b480b82d6f04b8e4885
parent f229c4a106b574e8a3de38fe06ef84dc11493fad
Author: tusooa <tusooa@kazv.moe>
Date:   Sat, 28 Jan 2023 22:10:06 -0500

Make checkbox settings accessible

Diffstat:
M
src/_mixins.scss
12
++++++++++++
M
src/components/checkbox/checkbox.vue
8
++++++--
M
src/components/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
@@ -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
@@ -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
@@ -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>