logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 902954b29825647eaf5435c89e379ef4babe7931
parent 6158b8667e6c76c5a5a09b480b82d6f04b8e4885
Author: tusooa <tusooa@kazv.moe>
Date:   Thu,  9 Feb 2023 21:35:56 -0500

Use class to style screenreader-only text

Diffstat:

Msrc/App.scss14++++++++++++--
Msrc/_mixins.scss12------------
Msrc/components/checkbox/checkbox.vue3+--
Msrc/components/screen_reader_notice/screen_reader_notice.vue10+---------
Msrc/components/settings_modal/helpers/modified_indicator.vue2+-
5 files changed, 15 insertions(+), 26 deletions(-)

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