style: use <button type="button"> instead of <a href="#"> for some instances for better accessibility and styling

This commit is contained in:
Valentyne Stigloher 2025-09-13 20:19:37 +02:00
parent 0d3de24dc5
commit b968fc6f18
3 changed files with 39 additions and 18 deletions

View File

@ -454,30 +454,40 @@ const addBrackets = (str: string): string => {
<AdPlaceholder :phkey="['content-0', 'content-mobile-0']" /> <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
<section class="mt-5"> <section class="mt-5">
<a href="#" class="btn btn-outline-danger" @click.prevent="logout"> <button type="button" class="btn btn-outline-danger" @click="logout">
<Icon v="sign-out" /> <Icon v="sign-out" />
<T :params="{ username: user.username }">user.logout</T> <T :params="{ username: user.username }">user.logout</T>
</a> </button>
<a <button
v-if="accounts && Object.keys(accounts).length > 1" v-if="accounts && Object.keys(accounts).length > 1"
href="#" type="button"
class="btn btn-outline-danger" class="btn btn-outline-danger"
@click.prevent="logoutAll" @click="logoutAll"
> >
<Icon v="sign-out" /> <Icon v="sign-out" />
<T>user.logoutAll</T> <T>user.logoutAll</T>
</a> </button>
<a v-if="user.username !== 'example'" href="#" class="btn btn-outline-danger" @click.prevent="deleteAccount"> <button
v-if="user.username !== 'example'"
type="button"
class="btn btn-outline-danger"
@click="deleteAccount"
>
<Icon v="trash-alt" /> <Icon v="trash-alt" />
<T :params="{ username: user.username }">user.deleteAccount</T> <T :params="{ username: user.username }">user.deleteAccount</T>
</a> </button>
<a v-if="impersonationActive" href="#" class="btn btn-outline-primary" @click.prevent="stopImpersonation"> <button
v-if="impersonationActive"
type="button"
class="btn btn-outline-primary"
@click="stopImpersonation"
>
<Icon v="user-secret" /> <Icon v="user-secret" />
Stop impersonation Stop impersonation
</a> </button>
</section> </section>
</template> </template>

View File

@ -169,15 +169,20 @@ const { data: sourcesKeys } = await useFetch('/api/sources/keys', { lazy: true,
</div> </div>
<template v-if="config.nouns.templates?.enabled"> <template v-if="config.nouns.templates?.enabled">
<a v-if="!templateVisible" href="#" class="btn btn-outline-primary w-100 mb-3" @click.prevent="templateVisible = true"> <button
v-if="!templateVisible"
type="button"
class="btn btn-outline-primary w-100 mb-3"
@click="templateVisible = true"
>
<Icon v="copy" /> <Icon v="copy" />
<T>nouns.template.header</T> <T>nouns.template.header</T>
</a> </button>
<div v-else class="card mb-3"> <div v-else class="card mb-3">
<a href="#" class="card-header" @click.prevent="templateVisible = false"> <button type="button" class="card-header btn btn-link" @click="templateVisible = false">
<Icon v="copy" /> <Icon v="copy" />
<T>nouns.template.header</T> <T>nouns.template.header</T>
</a> </button>
<div class="card-body"> <div class="card-body">
<div class="input-group mb-3 bg-white"> <div class="input-group mb-3 bg-white">
<span class="input-group-text"> <span class="input-group-text">

View File

@ -130,14 +130,20 @@ const isInRange = (year: number, month: number): boolean => {
<li class="list-inline-item"> <li class="list-inline-item">
Period: Period:
</li> </li>
<li v-for="(_, period) in PERIODS" class="list-inline-item"> <li v-for="(_, period) in PERIODS" :key="period" class="list-inline-item">
<a href="#" class="btn btn-outline-primary" @click.prevent="setPeriod(period)">{{ period }}</a> <button type="button" class="btn btn-outline-primary" @click="setPeriod(period)">
{{ period }}
</button>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#" class="btn btn-outline-primary" @click.prevent="addPeriod({ months: -1 })">&lt;</a> <button type="button" class="btn btn-outline-primary" @click="addPeriod({ months: -1 })">
&lt;
</button>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#" class="btn btn-outline-primary" @click.prevent="addPeriod({ months: 1 })">&gt;</a> <button type="button" class="btn btn-outline-primary" @click="addPeriod({ months: 1 })">
&gt;
</button>
</li> </li>
</ul> </ul>
<div class="input-group mb-3"> <div class="input-group mb-3">