natty
/
calckey
1
0
Fork 0
Code Issues 1 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" 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

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

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

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

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

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>