diff options
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/ButtonBackToTop.vue | 2 | ||||
-rw-r--r-- | src/components/Global/FormFile.vue | 7 | ||||
-rw-r--r-- | src/components/Global/InfoTooltip.vue | 2 | ||||
-rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 2 | ||||
-rw-r--r-- | src/components/Global/Search.vue | 2 | ||||
-rw-r--r-- | src/components/Global/TableRowAction.vue | 12 |
6 files changed, 17 insertions, 10 deletions
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue index 95e74045..9160c7b7 100644 --- a/src/components/Global/ButtonBackToTop.vue +++ b/src/components/Global/ButtonBackToTop.vue @@ -5,10 +5,10 @@ :class="{ 'show-btn': showButton }" variant="secondary" :title="$t('global.ariaLabel.scrollToTop')" - :aria-label="$t('global.ariaLabel.scrollToTop')" @click="scrollToTop" > <icon-up-to-top /> + <span class="sr-only">{{ $t('global.ariaLabel.scrollToTop') }}</span> </b-button> </template> diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue index eaed445d..4457a312 100644 --- a/src/components/Global/FormFile.vue +++ b/src/components/Global/FormFile.vue @@ -23,8 +23,11 @@ class="px-2 ml-auto" :disabled="disabled" @click="file = null" - ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" - /></b-button> + ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span + class="sr-only" + >{{ $t('global.fileUpload.clearSelectedFile') }}</span + > + </b-button> </div> </div> </template> diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue index 5d604503..c91109d1 100644 --- a/src/components/Global/InfoTooltip.vue +++ b/src/components/Global/InfoTooltip.vue @@ -4,9 +4,9 @@ variant="link" class="btn-tooltip btn-icon-only" :title="title" - :aria-label="$t('global.ariaLabel.tooltip')" > <icon-tooltip /> + <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span> </b-button> </template> diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index 969a15d3..d2c0d4a6 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -2,7 +2,6 @@ <div class="input-password-toggle-container"> <slot></slot> <b-button - :aria-label="togglePasswordLabel" :title="togglePasswordLabel" variant="link" class="input-action-btn btn-icon-only" @@ -11,6 +10,7 @@ > <icon-view-off v-if="isVisible" /> <icon-view v-else /> + <span class="sr-only">{{ togglePasswordLabel }}</span> </b-button> </div> </template> diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index 6029f4b7..ac8f9bfb 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -25,11 +25,11 @@ v-if="filter" variant="link" class="btn-icon-only input-action-btn" - :aria-label="$t('global.ariaLabel.clearSearch')" :title="$t('global.ariaLabel.clearSearch')" @click="onClearSearch" > <icon-close /> + <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span> </b-button> </b-input-group> </b-form-group> diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue index 5b2c4a99..9d853bc7 100644 --- a/src/components/Global/TableRowAction.vue +++ b/src/components/Global/TableRowAction.vue @@ -6,11 +6,11 @@ :download="download" :href="href" :title="title" - :aria-label="title" > <slot name="icon"> {{ $t('global.action.export') }} </slot> + <span v-if="btnIconOnly" class="sr-only">{{ title }}</span> </b-link> <b-link v-else-if="value === 'download'" @@ -27,15 +27,15 @@ <b-button v-else variant="link" - class="btn-icon-only" - :aria-label="title" - :title="title" + :class="{ 'btn-icon-only': btnIconOnly }" :disabled="!enabled" + :title="btnIconOnly ? title : !title" @click="$emit('click-table-action', value)" > <slot name="icon"> {{ title }} </slot> + <span v-if="btnIconOnly" class="sr-only">{{ title }}</span> </b-button> </span> </template> @@ -70,6 +70,10 @@ export default { type: String, default: '', }, + btnIconOnly: { + type: Boolean, + default: true, + }, }, computed: { dataForExport() { |