Make checkbox settings accessible

This commit is contained in:
tusooa 2023-01-28 22:10:06 -05:00
parent f229c4a106
commit 6158b8667e
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
3 changed files with 21 additions and 8 deletions

View File

@ -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;
}

View File

@ -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;

View File

@ -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>