natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: ♿ add aria labels to buttons

This commit is contained in:
ThatOneCalculator 2023-07-12 23:22:58 -07:00
parent c1fe242a25
commit 9a68e77f92
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
14 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
locales/en-US.yml
View File

@ -1121,6 +1121,9 @@ youHaveUnreadAnnouncements: "You have unread announcements"
donationLink: "Link to donation page"
neverShow: "Don't show again"
remindMeLater: "Maybe later"
removeQuote: "Remove quote"
removeRecipient: "Remove recipient"
removeMember: "Remove member"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing

2
packages/backend/src/server/api/endpoints/admin/meta.ts
View File

@ -495,7 +495,7 @@ export const meta = {
type: "string",
optional: true,
nullable: true,
}
},
},
},
} as const;

2
packages/backend/src/server/api/endpoints/meta.ts
View File

@ -393,7 +393,7 @@ export const meta = {
type: "string",
optional: "true",
nullable: true,
}
},
},
},
} as const;

36
packages/client/src/components/MkDonation.vue
View File

@ -18,7 +18,7 @@
}}
</p>
</div>
<div class="_flexList" style="gap: 0.6rem;">
<div class="_flexList" style="gap: 0.6rem">
<MkButton
primary
@click="
@ -46,7 +46,7 @@
}}</MkButton>
</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>
</button>
</div>
@ -72,10 +72,10 @@ const hostname = instance.name?.length < 38 ? instance.name : host;
const zIndex = os.claimZIndex("low");
function slideIn() {
show.value = false;
nextTick(() => {
show.value = true;
});
show.value = false;
nextTick(() => {
show.value = true;
});
}
slideIn();
@ -98,31 +98,35 @@ function openExternal(link) {
<style lang="scss" scoped>
.slide-fade-enter-from {
opacity: 0;
transform: translateY(100%);
opacity: 0;
transform: translateY(100%);
}
.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 {
opacity: 1;
transform: translateY(0);
opacity: 1;
transform: translateY(0);
}
.slide-fade-leave-from {
opacity: 1;
transform: translateY(0);
opacity: 1;
transform: translateY(0);
}
.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 {
opacity: 0;
transform: translateY(100%);
opacity: 0;
transform: translateY(100%);
}
</style>

1
packages/client/src/components/MkInfo.vue
View File

@ -12,6 +12,7 @@
v-tooltip="i18n.ts.close"
class="_buttonIcon close"
@click.stop="close"
:aria-label="i18n.t('close')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>

2
packages/client/src/components/MkModalPageWindow.vue
View File

@ -26,7 +26,7 @@
></i>
<span>{{ pageMetadata?.value.title }}</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>
</button>
</div>

2
packages/client/src/components/MkPollEditor.vue
View File

@ -14,7 +14,7 @@
@update:modelValue="onInput(i, $event)"
>
</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>
</button>
</li>

6
packages/client/src/components/MkPostForm.vue
View File

@ -11,7 +11,7 @@
>
<header>
<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
v-if="$props.editId == null"
@ -84,7 +84,7 @@
<div v-if="quoteId" class="with-quote">
<i class="ph-quotes ph-bold ph-lg"></i>
{{ 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>
</button>
</div>
@ -93,7 +93,7 @@
<div class="visibleUsers">
<span v-for="u in visibleUsers" :key="u.id">
<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>
</button>
</span>

1
packages/client/src/components/MkWidgets.vue
View File

@ -40,6 +40,7 @@
<button
class="remove _button"
@click.prevent.stop="removeWidget(element)"
:aria-label="i18n.t('close')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>

4
packages/client/src/pages/admin/settings.vue
View File

@ -59,9 +59,7 @@
class="_formBlock"
>
<template #prefix
><i
class="ph-hand-heart ph-bold ph-lg"
></i
><i class="ph-hand-heart ph-bold ph-lg"></i
></template>
<template #label>{{
i18n.ts.donationLink

2
packages/client/src/pages/follow-requests.vue
View File

@ -60,12 +60,14 @@
<button
class="_button"
@click="accept(req.follower)"
:aria-label="i18n.t('accept')"
>
<i class="ph-check ph-bold ph-lg"></i>
</button>
<button
class="_button"
@click="reject(req.follower)"
:aria-label="i18n.t('reject')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>

1
packages/client/src/pages/gallery/edit.vue
View File

@ -29,6 +29,7 @@
v-tooltip="i18n.ts.remove"
class="remove _button"
@click="remove(file)"
:aria-label="i18n.t('remove')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>

1
packages/client/src/pages/my-groups/group.vue
View File

@ -23,6 +23,7 @@
<button
class="_button"
@click="removeUser(user)"
:aria-label="i18n.t('removeMember')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>

1
packages/client/src/pages/my-lists/list.vue
View File

@ -50,6 +50,7 @@
<button
class="_button"
@click="removeUser(user)"
:aria-label="i18n.t('removeMember')"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>