chore: use bulma sr-only styles instead of tailwind's

This commit is contained in:
kolaente 2025-07-22 19:40:17 +02:00
parent ac2321fa21
commit 5a406b2ecc
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
8 changed files with 30 additions and 30 deletions

View File

@ -30,7 +30,7 @@
:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
class="project-title-button"
>
<span class="tw-sr-only">{{ $t('project.description') }}</span>
<span class="is-sr-only">{{ $t('project.description') }}</span>
<Icon icon="circle-info" />
</BaseButton>
@ -44,7 +44,7 @@
class="project-title-button"
@click="toggleOpen"
>
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<Icon
icon="ellipsis-h"
class="icon"

View File

@ -54,7 +54,7 @@
:class="{'is-favorite': project.isFavorite}"
@click="projectStore.toggleProjectFavorite(project)"
>
<span class="tw-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
<span class="is-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
</BaseButton>
<ProjectSettingsDropdown
@ -67,7 +67,7 @@
class="menu-list-dropdown-trigger"
@click="toggleOpen"
>
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<Icon
icon="ellipsis-h"
class="icon"

View File

@ -155,7 +155,7 @@ async function toggleReaction(value: string) {
class="reaction-button"
@click.stop="toggleEmojiPicker"
>
<span class="tw-sr-only">{{ $t('reaction.add') }}</span>
<span class="is-sr-only">{{ $t('reaction.add') }}</span>
<Icon :icon="['far', 'face-laugh']" />
</BaseButton>
<CustomTransition name="fade">

View File

@ -14,7 +14,7 @@
aria-hidden="true"
>1</span>
</span>
<span class="tw-sr-only">{{ $t('input.editor.heading1') }}</span>
<span class="is-sr-only">{{ $t('input.editor.heading1') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.heading2')"
@ -29,7 +29,7 @@
aria-hidden="true"
>2</span>
</span>
<span class="tw-sr-only">{{ $t('input.editor.heading2') }}</span>
<span class="is-sr-only">{{ $t('input.editor.heading2') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.heading3')"
@ -44,7 +44,7 @@
aria-hidden="true"
>3</span>
</span>
<span class="tw-sr-only">{{ $t('input.editor.heading3') }}</span>
<span class="is-sr-only">{{ $t('input.editor.heading3') }}</span>
</BaseButton>
</div>
@ -58,7 +58,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-bold']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.bold') }}</span>
<span class="is-sr-only">{{ $t('input.editor.bold') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.italic')"
@ -69,7 +69,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-italic']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.italic') }}</span>
<span class="is-sr-only">{{ $t('input.editor.italic') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.underline')"
@ -80,7 +80,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-underline']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.underline') }}</span>
<span class="is-sr-only">{{ $t('input.editor.underline') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.strikethrough')"
@ -91,7 +91,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-strikethrough']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.strikethrough') }}</span>
<span class="is-sr-only">{{ $t('input.editor.strikethrough') }}</span>
</BaseButton>
</div>
@ -105,7 +105,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-code']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.code') }}</span>
<span class="is-sr-only">{{ $t('input.editor.code') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.quote')"
@ -116,7 +116,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-quote-right']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.quote') }}</span>
<span class="is-sr-only">{{ $t('input.editor.quote') }}</span>
</BaseButton>
</div>
@ -130,7 +130,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-list-ul']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.bulletList') }}</span>
<span class="is-sr-only">{{ $t('input.editor.bulletList') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.orderedList')"
@ -141,7 +141,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-list-ol']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.orderedList') }}</span>
<span class="is-sr-only">{{ $t('input.editor.orderedList') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.taskList')"
@ -152,7 +152,7 @@
<span class="icon">
<Icon icon="fa-list-check" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.taskList') }}</span>
<span class="is-sr-only">{{ $t('input.editor.taskList') }}</span>
</BaseButton>
</div>
@ -165,7 +165,7 @@
<span class="icon">
<Icon icon="fa-image" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.image') }}</span>
<span class="is-sr-only">{{ $t('input.editor.image') }}</span>
</BaseButton>
</div>
@ -180,7 +180,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-link']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.link') }}</span>
<span class="is-sr-only">{{ $t('input.editor.link') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.text')"
@ -192,7 +192,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-paragraph']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.text') }}</span>
<span class="is-sr-only">{{ $t('input.editor.text') }}</span>
</BaseButton>
<BaseButton
@ -203,7 +203,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-ruler-horizontal']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
<span class="is-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
</BaseButton>
</div>
@ -216,7 +216,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-undo']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.undo') }}</span>
<span class="is-sr-only">{{ $t('input.editor.undo') }}</span>
</BaseButton>
<BaseButton
v-tooltip="$t('input.editor.redo')"
@ -226,7 +226,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-redo']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.redo') }}</span>
<span class="is-sr-only">{{ $t('input.editor.redo') }}</span>
</BaseButton>
</div>
@ -241,7 +241,7 @@
<span class="icon">
<Icon :icon="['fa', 'fa-table']" />
</span>
<span class="tw-sr-only">{{ $t('input.editor.table.title') }}</span>
<span class="is-sr-only">{{ $t('input.editor.table.title') }}</span>
</BaseButton>
<div
v-if="tableMode"

View File

@ -9,7 +9,7 @@
class="dropdown-trigger"
@click="triggerProps.toggleOpen"
>
<span class="tw-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
<Icon
icon="ellipsis-h"
class="icon"

View File

@ -6,7 +6,7 @@
<div class="add-task__field field is-grouped">
<p class="control has-icons-left has-icons-right is-expanded">
<label
class="tw-sr-only"
class="is-sr-only"
:for="textareaId"
>
{{ $t('project.list.addPlaceholder') }}

View File

@ -35,7 +35,7 @@
height="48"
width="48"
>
<figcaption class="tw-sr-only">
<figcaption class="is-sr-only">
{{ $t('misc.avatarOfUser', {user: getDisplayName(c.author)}) }}
</figcaption>
</figure>
@ -68,7 +68,7 @@
:title="$t('task.comment.permalink')"
@click.prevent.stop="copy(getCommentUrl(`${c.id}`))"
>
<span class="tw-sr-only">{{ $t('task.comment.permalink') }}</span>
<span class="is-sr-only">{{ $t('task.comment.permalink') }}</span>
<Icon icon="link" />
</a>
<CustomTransition name="fade">
@ -142,7 +142,7 @@
height="48"
width="48"
>
<figcaption class="tw-sr-only">
<figcaption class="is-sr-only">
{{ $t('misc.avatarOfUser', {user: getDisplayName(authStore.info)}) }}
</figcaption>
</figure>

View File

@ -152,7 +152,7 @@
class="favorite"
@click.stop="toggleFavorite"
>
<span class="tw-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
<span class="is-sr-only">{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}</span>
<Icon
v-if="task.isFavorite"
icon="star"