refactor: ♿ add aria labels to buttons
This commit is contained in:
parent
c1fe242a25
commit
9a68e77f92
|
@ -1121,6 +1121,9 @@ youHaveUnreadAnnouncements: "You have unread announcements"
|
||||||
donationLink: "Link to donation page"
|
donationLink: "Link to donation page"
|
||||||
neverShow: "Don't show again"
|
neverShow: "Don't show again"
|
||||||
remindMeLater: "Maybe later"
|
remindMeLater: "Maybe later"
|
||||||
|
removeQuote: "Remove quote"
|
||||||
|
removeRecipient: "Remove recipient"
|
||||||
|
removeMember: "Remove member"
|
||||||
|
|
||||||
_sensitiveMediaDetection:
|
_sensitiveMediaDetection:
|
||||||
description: "Reduces the effort of server moderation through automatically recognizing
|
description: "Reduces the effort of server moderation through automatically recognizing
|
||||||
|
|
|
@ -495,7 +495,7 @@ export const meta = {
|
||||||
type: "string",
|
type: "string",
|
||||||
optional: true,
|
optional: true,
|
||||||
nullable: true,
|
nullable: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|
|
@ -393,7 +393,7 @@ export const meta = {
|
||||||
type: "string",
|
type: "string",
|
||||||
optional: "true",
|
optional: "true",
|
||||||
nullable: true,
|
nullable: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
}}
|
}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="_flexList" style="gap: 0.6rem;">
|
<div class="_flexList" style="gap: 0.6rem">
|
||||||
<MkButton
|
<MkButton
|
||||||
primary
|
primary
|
||||||
@click="
|
@click="
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
}}</MkButton>
|
}}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="_button" :class="$style.close" @click="close">
|
<button class="_button" :class="$style.close" @click="close" :aria-label="i18n.t('close')">
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -72,10 +72,10 @@ const hostname = instance.name?.length < 38 ? instance.name : host;
|
||||||
const zIndex = os.claimZIndex("low");
|
const zIndex = os.claimZIndex("low");
|
||||||
|
|
||||||
function slideIn() {
|
function slideIn() {
|
||||||
show.value = false;
|
show.value = false;
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
show.value = true;
|
show.value = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
slideIn();
|
slideIn();
|
||||||
|
@ -98,31 +98,35 @@ function openExternal(link) {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.slide-fade-enter-from {
|
.slide-fade-enter-from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-enter-active {
|
.slide-fade-enter-active {
|
||||||
transition: opacity 0.5s, transform 0.5s ease-out;
|
transition:
|
||||||
|
opacity 0.5s,
|
||||||
|
transform 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-enter-to {
|
.slide-fade-enter-to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-leave-from {
|
.slide-fade-leave-from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-leave-active {
|
.slide-fade-leave-active {
|
||||||
transition: opacity 0.5s, transform 0.5s ease-out;
|
transition:
|
||||||
|
opacity 0.5s,
|
||||||
|
transform 0.5s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-leave-to {
|
.slide-fade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
v-tooltip="i18n.ts.close"
|
v-tooltip="i18n.ts.close"
|
||||||
class="_buttonIcon close"
|
class="_buttonIcon close"
|
||||||
@click.stop="close"
|
@click.stop="close"
|
||||||
|
:aria-label="i18n.t('close')"
|
||||||
>
|
>
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
></i>
|
></i>
|
||||||
<span>{{ pageMetadata?.value.title }}</span>
|
<span>{{ pageMetadata?.value.title }}</span>
|
||||||
</span>
|
</span>
|
||||||
<button class="_button" @click="$refs.modal.close()">
|
<button class="_button" @click="$refs.modal.close()" :aria-label="i18n.t('close')">
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
@update:modelValue="onInput(i, $event)"
|
@update:modelValue="onInput(i, $event)"
|
||||||
>
|
>
|
||||||
</MkInput>
|
</MkInput>
|
||||||
<button class="_button" @click="remove(i)">
|
<button class="_button" @click="remove(i)" :aria-label="i18n.t('remove')">
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
>
|
>
|
||||||
<header>
|
<header>
|
||||||
<button v-if="!fixed" class="cancel _button" @click="cancel">
|
<button v-if="!fixed" class="cancel _button" @click="cancel">
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg" :aria-label="i18n.t('close')"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="$props.editId == null"
|
v-if="$props.editId == null"
|
||||||
|
@ -84,7 +84,7 @@
|
||||||
<div v-if="quoteId" class="with-quote">
|
<div v-if="quoteId" class="with-quote">
|
||||||
<i class="ph-quotes ph-bold ph-lg"></i>
|
<i class="ph-quotes ph-bold ph-lg"></i>
|
||||||
{{ i18n.ts.quoteAttached
|
{{ i18n.ts.quoteAttached
|
||||||
}}<button class="_button" @click="quoteId = null">
|
}}<button class="_button" @click="quoteId = null" :aria-label="i18n.t('removeQuote')">
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -93,7 +93,7 @@
|
||||||
<div class="visibleUsers">
|
<div class="visibleUsers">
|
||||||
<span v-for="u in visibleUsers" :key="u.id">
|
<span v-for="u in visibleUsers" :key="u.id">
|
||||||
<MkAcct :user="u" />
|
<MkAcct :user="u" />
|
||||||
<button class="_button" @click="removeVisibleUser(u)">
|
<button class="_button" @click="removeVisibleUser(u)" :aria-label="i18n.t('removeRecipient')">
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -40,6 +40,7 @@
|
||||||
<button
|
<button
|
||||||
class="remove _button"
|
class="remove _button"
|
||||||
@click.prevent.stop="removeWidget(element)"
|
@click.prevent.stop="removeWidget(element)"
|
||||||
|
:aria-label="i18n.t('close')"
|
||||||
>
|
>
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -59,9 +59,7 @@
|
||||||
class="_formBlock"
|
class="_formBlock"
|
||||||
>
|
>
|
||||||
<template #prefix
|
<template #prefix
|
||||||
><i
|
><i class="ph-hand-heart ph-bold ph-lg"></i
|
||||||
class="ph-hand-heart ph-bold ph-lg"
|
|
||||||
></i
|
|
||||||
></template>
|
></template>
|
||||||
<template #label>{{
|
<template #label>{{
|
||||||
i18n.ts.donationLink
|
i18n.ts.donationLink
|
||||||
|
|
|
@ -60,12 +60,14 @@
|
||||||
<button
|
<button
|
||||||
class="_button"
|
class="_button"
|
||||||
@click="accept(req.follower)"
|
@click="accept(req.follower)"
|
||||||
|
:aria-label="i18n.t('accept')"
|
||||||
>
|
>
|
||||||
<i class="ph-check ph-bold ph-lg"></i>
|
<i class="ph-check ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="_button"
|
class="_button"
|
||||||
@click="reject(req.follower)"
|
@click="reject(req.follower)"
|
||||||
|
:aria-label="i18n.t('reject')"
|
||||||
>
|
>
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
v-tooltip="i18n.ts.remove"
|
v-tooltip="i18n.ts.remove"
|
||||||
class="remove _button"
|
class="remove _button"
|
||||||
@click="remove(file)"
|
@click="remove(file)"
|
||||||
|
:aria-label="i18n.t('remove')"
|
||||||
>
|
>
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
<button
|
<button
|
||||||
class="_button"
|
class="_button"
|
||||||
@click="removeUser(user)"
|
@click="removeUser(user)"
|
||||||
|
:aria-label="i18n.t('removeMember')"
|
||||||
>
|
>
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -50,6 +50,7 @@
|
||||||
<button
|
<button
|
||||||
class="_button"
|
class="_button"
|
||||||
@click="removeUser(user)"
|
@click="removeUser(user)"
|
||||||
|
:aria-label="i18n.t('removeMember')"
|
||||||
>
|
>
|
||||||
<i class="ph-x ph-bold ph-lg"></i>
|
<i class="ph-x ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue