ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: use BaseButton where easily possible

Browse Source 
This replaces links with BaseButton components. BaseButton will use `<button type="button">` inside for this case. This improves accessibility a lot. Also we might be able to remove the `.stop` modifiers in some places because AFAIK the button element stops propagation by default.
This commit is contained in:
Dominik Pschenitschni
2022-05-11 01:14:38 +02:00
committed by Gitea
parent 9e1ec72739
commit 3b9bc5b2f8
25 changed files with 159 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/tasks/gantt-component.vue
View File

@ -96,9 +96,10 @@
</span>
<priority-label :priority="t.priority" :done="t.done"/>
<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
<a @click="editTask(theTasks[k])" class="edit-toggle">
<!-- FIXME: add label -->
<BaseButton @click="editTask(theTasks[k])" class="edit-toggle">
<icon icon="pen"/>
</a>
</BaseButton>
</VueDragResize>
</div>
<template v-if="showTaskswithoutDates">
@ -184,12 +185,14 @@ import TaskCollectionService from '../../services/taskCollection'
import {mapState} from 'vuex'
import Rights from '../../models/constants/rights.json'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {colorIsDark} from '@/helpers/color/colorIsDark'
export default defineComponent({
name: 'GanttChart',
components: {
BaseButton,
FilterPopup,
PriorityLabel,
EditTask,

18
src/components/tasks/partials/attachments.vue
View File

@ -26,6 +26,9 @@
</progress>
<div class="files" v-if="attachments.length > 0">
<!-- FIXME: don't use a for element that wraps other links / buttons
Instead: overlay element with button that is inside.
-->
<a
class="attachment"
v-for="a in attachments"
@ -53,25 +56,25 @@
</span>
</p>
<p>
<a
<BaseButton
@click.prevent.stop="downloadAttachment(a)"
v-tooltip="$t('task.attachment.downloadTooltip')"
>
{{ $t('misc.download') }}
</a>
<a
</BaseButton>
<BaseButton
@click.stop="copyUrl(a)"
v-tooltip="$t('task.attachment.copyUrlTooltip')"
>
{{ $t('task.attachment.copyUrl') }}
</a>
<a
</BaseButton>
<BaseButton
@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
v-if="editEnabled"
v-tooltip="$t('task.attachment.deleteTooltip')"
>
{{ $t('misc.delete') }}
</a>
</BaseButton>
</p>
</div>
</a>
@ -148,9 +151,12 @@ import {mapState} from 'vuex'
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
import BaseButton from '@/components/base/BaseButton'
export default defineComponent({
name: 'attachments',
components: {
BaseButton,
User,
},
data() {

7
src/components/tasks/partials/editAssignees.vue
View File

@ -18,9 +18,9 @@
<template #tag="{item: user}">
<span class="assignee">
<user :avatar-size="32" :show-username="false" :user="user"/>
<a @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
<icon icon="times"/>
</a>
</BaseButton>
</span>
</template>
</Multiselect>
@ -34,6 +34,7 @@ import {useI18n} from 'vue-i18n'
import User from '@/components/misc/user.vue'
import Multiselect from '@/components/input/multiselect.vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {includesById} from '@/helpers/utils'
import UserModel from '@/models/user'
@ -95,7 +96,7 @@ async function removeAssignee(user: UserModel) {
success({message: t('task.assignee.unassignSuccess')})
}
async function findUser(query) {
async function findUser(query: string) {
if (query === '') {
clearAllFoundUsers()
return

3
src/components/tasks/partials/editLabels.vue
View File

@ -19,7 +19,7 @@
:style="{'background': label.hexColor, 'color': label.textColor}"
class="tag">
<span>{{ label.title }}</span>
<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
</span>
</template>
<template #searchResult="{option}">
@ -47,6 +47,7 @@ import LabelModel from '@/models/label'
import LabelTaskService from '@/services/labelTask'
import {success} from '@/message'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue'
const props = defineProps({

9
src/components/tasks/partials/quick-add-magic.vue
View File

@ -2,7 +2,7 @@
<div v-if="available">
<p class="help has-text-grey">
{{ $t('task.quickAddMagic.hint') }}.
<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
<BaseButton @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</BaseButton>
</p>
<modal
@close="() => visible = false"
@ -86,13 +86,16 @@
</template>
<script setup lang="ts">
import {ref, computed} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
import {PREFIXES} from '@/modules/parseTaskText'
import {ref, computed} from 'vue'
const visible = ref(false)
const mode = ref(getQuickAddMagicMode())
const available = computed(() => mode.value !== 'disabled')
const prefixes = computed(() =>PREFIXES[mode.value])
const prefixes = computed(() => PREFIXES[mode.value])
</script>

9
src/components/tasks/partials/relatedTasks.vue
View File

@ -103,12 +103,13 @@
</span>
{{ t.title }}
</router-link>
<a
<BaseButton
v-if="editEnabled"
@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
class="remove"
v-if="editEnabled">
>
<icon icon="trash-alt"/>
</a>
</BaseButton>
</div>
</div>
</div>
@ -145,6 +146,7 @@ import TaskRelationService from '../../../services/taskRelation'
import relationKinds from '../../../models/constants/relationKinds'
import TaskRelationModel from '../../../models/taskRelation'
import BaseButton from '@/components/base/BaseButton.vue'
import Multiselect from '@/components/input/multiselect.vue'
export default defineComponent({
@ -166,6 +168,7 @@ export default defineComponent({
}
},
components: {
BaseButton,
Multiselect,
},
props: {

7
src/components/tasks/partials/reminders.vue
View File

@ -11,9 +11,9 @@
:disabled="disabled"
@close-on-change="() => addReminderDate(index)"
/>
<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
<icon icon="times"></icon>
</a>
</BaseButton>
</div>
<div class="reminder-input" v-if="!disabled">
<Datepicker
@ -28,10 +28,13 @@
<script setup lang="ts">
import {PropType, ref, onMounted, watch} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Datepicker from '@/components/input/datepicker.vue'
type Reminder = Date | string
const props = defineProps({
modelValue: {
type: Array as PropType<Reminder[]>,

25
src/components/tasks/partials/singleTaskInList.vue
View File

@ -39,17 +39,20 @@
:user="a"
v-for="(a, i) in task.assignees"
/>
<time
:datetime="formatISO(task.dueDate)"
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="is-italic"
@click.prevent.stop="showDefer = !showDefer"
<BaseButton
v-if="+new Date(task.dueDate) > 0"
@click.prevent.stop="showDefer = !showDefer"
v-tooltip="formatDate(task.dueDate)"
:aria-expanded="showDefer ? 'true' : 'false'"
>
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
</time>
<time
:datetime="formatISO(task.dueDate)"
:class="{'overdue': task.dueDate <= new Date() && !task.done}"
class="is-italic"
:aria-expanded="showDefer ? 'true' : 'false'"
>
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
</time>
</BaseButton>
<transition name="fade">
<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
</transition>
@ -80,13 +83,13 @@
v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
{{ $store.getters['lists/getListById'](task.listId).title }}
</router-link>
<a
<BaseButton
:class="{'is-favorite': task.isFavorite}"
@click="toggleFavorite"
class="favorite">
<icon icon="star" v-if="task.isFavorite"/>
<icon :icon="['far', 'star']" v-else/>
</a>
</BaseButton>
<slot></slot>
</div>
</template>
@ -99,6 +102,7 @@ import PriorityLabel from './priorityLabel'
import TaskService from '../../../services/task'
import Labels from './labels'
import User from '../../misc/user'
import BaseButton from '@/components/base/BaseButton.vue'
import Fancycheckbox from '../../input/fancycheckbox'
import DeferTask from './defer-task'
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@ -115,6 +119,7 @@ export default defineComponent({
}
},
components: {
BaseButton,
ChecklistSummary,
DeferTask,
Fancycheckbox,