diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 1 | ||||
-rw-r--r-- | src/components/Global/InfoTooltip.vue | 9 | ||||
-rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 22 | ||||
-rw-r--r-- | src/components/Global/Search.vue | 16 | ||||
-rw-r--r-- | src/components/Global/TableDateFilter.vue | 92 | ||||
-rw-r--r-- | src/components/Global/TableRowAction.vue | 4 |
6 files changed, 63 insertions, 81 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index fb50f5ec..6e893a33 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -124,6 +124,7 @@ svg { } .btn-link { + display: inline-block; width: 100%; text-align: left; text-decoration: none !important; diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue index f3cb7f12..5d604503 100644 --- a/src/components/Global/InfoTooltip.vue +++ b/src/components/Global/InfoTooltip.vue @@ -1,6 +1,11 @@ <template> - <b-button v-b-tooltip variant="link" class="btn-tooltip" :title="title"> - <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span> + <b-button + v-b-tooltip + variant="link" + class="btn-tooltip btn-icon-only" + :title="title" + :aria-label="$t('global.ariaLabel.tooltip')" + > <icon-tooltip /> </b-button> </template> diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index bf3e4ca5..2119f8c6 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -2,22 +2,15 @@ <div class="input-password-toggle-container"> <slot></slot> <b-button - :aria-label="$t('global.ariaLabel.showPassword')" + :aria-label="togglePasswordLabel" + :title="togglePasswordLabel" variant="link" - class="input-action-btn" + class="input-action-btn btn-icon-only" :class="{ isVisible: isVisible }" @click="toggleVisibility" > - <icon-view-off - v-if="isVisible" - aria-hidden="true" - :title="$t('global.ariaLabel.hidePassword')" - /> - <icon-view - v-else - aria-hidden="true" - :title="$t('global.ariaLabel.showPassword')" - /> + <icon-view-off v-if="isVisible" /> + <icon-view v-else /> </b-button> </div> </template> @@ -32,6 +25,7 @@ export default { data() { return { isVisible: false, + togglePasswordLabel: this.$t('global.ariaLabel.showPassword'), }; }, methods: { @@ -44,6 +38,10 @@ export default { if (inputEl.nodeName === 'INPUT') { inputEl.type = this.isVisible ? 'text' : 'password'; } + + this.isVisible + ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword')) + : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword')); }, }, }; diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index c259df91..d472c0c9 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -23,10 +23,12 @@ <b-button 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 :title="$t('global.ariaLabel.clearSearch')" /> + <icon-close /> </b-button> </b-input-group> </b-form-group> @@ -77,16 +79,4 @@ export default { z-index: 4; stroke: gray('400'); } - -.btn { - position: absolute; - right: 0; - top: 0; - padding: 0.4rem 1rem; - z-index: 4; - svg { - margin-left: 0; - vertical-align: sub; - } -} </style> diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index 73b2b832..00c04ab0 100644 --- a/src/components/Global/TableDateFilter.vue +++ b/src/components/Global/TableDateFilter.vue @@ -23,32 +23,26 @@ {{ $t('global.form.dateMustBeBefore', { date: toDate }) }} </template> </b-form-invalid-feedback> - <template #append> - <b-form-datepicker - v-model="fromDate" - class="input-action" - button-only - right - :max="toDate" - :hide-header="true" - :locale="locale" - :label-help=" - $t('global.calendar.useCursorKeysToNavigateCalendarDates') - " - button-variant="link" - aria-controls="input-from-date" - > - <template #button-content> - <icon-calendar - :title="$t('global.calendar.openDatePicker')" - aria-hidden="true" - /> - <span class="sr-only">{{ - $t('global.calendar.openDatePicker') - }}</span> - </template> - </b-form-datepicker> - </template> + <b-form-datepicker + v-model="fromDate" + class="btn-datepicker btn-icon-only" + button-only + right + :max="toDate" + :hide-header="true" + :locale="locale" + :label-help=" + $t('global.calendar.useCursorKeysToNavigateCalendarDates') + " + :aria-label="$t('global.calendar.selectDate')" + :title="$t('global.calendar.selectDate')" + button-variant="link" + aria-controls="input-from-date" + > + <template #button-content> + <icon-calendar /> + </template> + </b-form-datepicker> </b-input-group> </b-form-group> <b-form-group @@ -73,32 +67,26 @@ {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }} </template> </b-form-invalid-feedback> - <template #append> - <b-form-datepicker - v-model="toDate" - class="input-action" - button-only - right - :min="fromDate" - :hide-header="true" - :locale="locale" - :label-help=" - $t('global.calendar.useCursorKeysToNavigateCalendarDates') - " - button-variant="link" - aria-controls="input-to-date" - > - <template #button-content> - <icon-calendar - :title="$t('global.calendar.openDatePicker')" - aria-hidden="true" - /> - <span class="sr-only">{{ - $t('global.calendar.openDatePicker') - }}</span> - </template> - </b-form-datepicker> - </template> + <b-form-datepicker + v-model="toDate" + class="btn-datepicker btn-icon-only" + button-only + right + :min="fromDate" + :hide-header="true" + :locale="locale" + :label-help=" + $t('global.calendar.useCursorKeysToNavigateCalendarDates') + " + :aria-label="$t('global.calendar.openDatePicker')" + :title="$t('global.calendar.openDatePicker')" + button-variant="link" + aria-controls="input-to-date" + > + <template #button-content> + <icon-calendar /> + </template> + </b-form-datepicker> </b-input-group> </b-form-group> </b-col> diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue index a12ae801..94ef6ce4 100644 --- a/src/components/Global/TableRowAction.vue +++ b/src/components/Global/TableRowAction.vue @@ -2,7 +2,7 @@ <span> <b-link v-if="value === 'export'" - class="align-bottom btn-link py-0" + class="align-bottom btn-icon-only py-0 btn-link" :download="download" :href="href" :title="title" @@ -15,7 +15,7 @@ <b-button v-else variant="link" - class="py-0" + class="btn-icon-only" :aria-label="title" :title="title" :disabled="!enabled" |