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']" />
<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" />
<T :params="{ username: user.username }">user.logout</T>
</a>
</button>
<a
<button
v-if="accounts && Object.keys(accounts).length > 1"
href="#"
type="button"
class="btn btn-outline-danger"
@click.prevent="logoutAll"
@click="logoutAll"
>
<Icon v="sign-out" />
<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" />
<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" />
Stop impersonation
</a>
</button>
</section>
</template>

View File

@ -169,15 +169,20 @@ const { data: sourcesKeys } = await useFetch('/api/sources/keys', { lazy: true,
</div>
<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" />
<T>nouns.template.header</T>
</a>
</button>
<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" />
<T>nouns.template.header</T>
</a>
</button>
<div class="card-body">
<div class="input-group mb-3 bg-white">
<span class="input-group-text">

View File

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