diff options
| author | tusooa <tusooa@kazv.moe> | 2023-02-09 21:35:56 -0500 |
|---|---|---|
| committer | tusooa <tusooa@kazv.moe> | 2023-02-09 21:35:56 -0500 |
| commit | 902954b29825647eaf5435c89e379ef4babe7931 (patch) | |
| tree | b10d79b20bede7d2e679ef80b3a2d68896f9762c /src/components | |
| parent | 6158b8667e6c76c5a5a09b480b82d6f04b8e4885 (diff) | |
Use class to style screenreader-only text
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/checkbox/checkbox.vue | 3 | ||||
| -rw-r--r-- | src/components/screen_reader_notice/screen_reader_notice.vue | 10 | ||||
| -rw-r--r-- | src/components/settings_modal/helpers/modified_indicator.vue | 2 |
3 files changed, 3 insertions, 12 deletions
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index ac7acd52..42f89be9 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 1cd908ae..8384ae6b 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 8311533a..45db3fc2 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> <FAIcon icon="wrench" - :aria-label="$t('settings.setting_changed')" /> </template> <template #content> |